Bourbon Refills如何链接到标签页

Question

我使用的是波旁威士忌续杯网站上的最小手风琴标签，http://refills.bourbon.io/我想知道如何从我的网站的另一个页面链接到特定的选项卡。加载带有选项卡的页面时，始终显示第一个选项卡。

我想知道如何使用我网站上不同页面的选项卡链接到页面，但不要激活第一个默认选项卡，而是激活第二个或第三个选项卡。你可以通过访问了解我所指的内容http://codepen.io/andrewjcurrie/details/qbqvxo/下面是为选项卡供电的JavaScript。

 $(document).ready(function () {
 $('.accordion-tabs-minimal').each(function(index) {
 $(this).children('li').first().children('a')
 .addClass('is-active').next().addClass('is-open').show();});
 $('.accordion-tabs-minimal').on('click', 'li > a.tab-link', function(event) {
 if (!$(this).hasClass('is-active')) { event.preventDefault();
 var accordionTabs = $(this).closest('.accordion-tabs-minimal');
 accordionTabs.find('.is-open').removeClass('is-open').hide();
 $(this).next().toggleClass('is-open').toggle();
 accordionTabs.find('.is-active').removeClass('is-active');
 $(this).addClass('is-active'); } else {
 event.preventDefault();}});});

正如你在笔上看到的，我希望链接能与哈希标签一起使用。我希望能够将#Second_Tab添加到基本URL中，并在访问该链接时使第二个选项卡处于活动状态。任何关于如何最好地实现这一目标的提示或建议都将不胜感激，谢谢！

Answer 1

Andrew。

实现这一目标的三个步骤：

1. 从HTML中的第一个tab-link中删除is-active
2. 为每个选项卡添加必要的ID（按照您的示例，我添加了id="Second_Tab"等
3. 如下更新第一个JS函数：

$('.accordion-tabs-minimal').each(function(index) {
  if (window.location.hash) {
    var hash = $.trim(window.location.hash);
    $(hash).addClass('is-active').next().addClass('is-open').show();
  } else {
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
  }
});

这首先检查URL是否有散列，如果有，则向该选项卡和内容添加必要的类并显示它们。如果URL中没有哈希，它会执行显示第一个选项卡的默认行为http://codepen.io/angeliquejw/pen/xVqzKV?editors=1000