如何根据页面加载时的锚标记在 div 之间切换？

Question

我正在两个显示定价选项的 divs 之间切换。它默认为页面加载的第一个选项。使用锚点 link，如何切换启动选项二？

Here's the page for reference. and a Fiddle 的精简版，以显示我正在使用的代码。我希望 "Club and Youth" 定价在 #Club-Youth 锚定到 URL 时显示。

非常感谢任何帮助！

HTML

<div class="pricing-switcher">
  <a class="toggle active" id="HS-College">High School and College</a>
  <a class="toggle" id="Club-Youth">Club and Youth</a>
</div>

<div class="pricing-wrapper">
  <div class="panels HS-College">Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1</div>
  <div class="panels Club-Youth hide">Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2</div>
</div>

CSS

.panels {
  display: flex;clear:both;
  padding-bottom: 30px;
}

.panels.HS-College {
  justify-content: center;
}

.panels.hide {
  display: none 
}

.pricing-switcher {
  float: left;
  width: 100%;
}

.toggle {
  float: left;
  display: flex;
  border: 2px solid #000;
  margin-right: 10px;
  cursor: pointer;
}

.toggle.active {
  background-color: red;
}

JS 切换

$(document).ready(function(){
  $('.toggle').click(function(){
    var self = $(this);  
    $('.panels').addClass('hide');
    $('.toggle').removeClass('active');
    self.addClass('active');
    $('.panels.'+ self.attr('id')).removeClass('hide');
  });
});

Answer 1

在页面加载URL中查找散列值

var hash = window.location.hash;
if (!(typeof object === 'undefined')) {
   // show/hide based on value of hash
   if (hash=='Club-Youth') {
      // show panel 1
   } else {
      // show panel 2
   }
}

Answer 2

$(window.location.hash).click();

window.location.hash 将从下面 url.

return #Club-Youth

https://www.hudl.com/products/assist/volleyball?token=K6~s9DTGVrSKh~X9VMetZv6YLKSMtAAp#Club-Youth

使用 $(window.location.hash) 将与 $('#Club-Youth') 相同并触发该元素上的点击事件。

确保此代码位于您的 $('.toggle').click(function(){}) 下方，以便它触发您已附加的代码。

如何根据页面加载时的锚标记在 div 之间切换？

How do I toggle between divs based on anchor tag on page load?

javascript

css

anchor

jquery

toggle