我在显示定价选项的两个div之间切换.默认为页面加载时的第一个选项.使用锚链接,如何具有切换启动选项两个？

Here’s the page for reference.和压缩版本的Fiddle,以显示我正在使用的代码.
我希望在#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');
  });
});

解决方法:

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

window.location.hash将从下面的URL返回#Club-Youth.

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

使用$(window.location.hash)将与$(‘#Club-Youth’)相同,并在该元素上触发click事件.

确保此代码位于$(‘.toggle’).click(function(){})下方,以便触发您已附加的代码.