Bourbon Refills How-To Link 标签

Question

我正在使用 bourbon refills 网站 http://refills.bourbon.io/ 中的最小手风琴标签，我想知道如何从我网站的另一个页面 link 到特定标签。当带有选项卡的页面加载时，第一个选项卡始终显示。

我想知道如何 link 使用来自我网站上不同页面的选项卡的页面，而不是激活第一个默认选项卡，而是激活第二个或第三个选项卡。您可以通过访问 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();}});});

正如您在笔上看到的那样，我希望 link 可以与散列标签一起使用。我希望能够将 #Second_Tab 添加到基础 URL 并在访问 link 时激活第二个选项卡。非常感谢任何有关如何最好地完成此操作的提示或建议，谢谢！

Answer 1

安德鲁。

实现此功能的三个步骤：

从 HTML

tab-link

is-active

将必要的 ID 添加到您的每个选项卡（按照您的示例，我添加了 id="Second_Tab" 等
更新第一个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 中没有散列，它会执行显示第一个选项卡的默认行为。你可以在这里看到我的工作 CodePen http://codepen.io/angeliquejw/pen/xVqzKV?editors=1000

Bourbon Refills How-To Link 标签

Bourbon Refills How-To Link To Tabs

javascript

tabs

bourbon