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

安德鲁。

让这个工作的三个步骤：

从HTML

is-active

tab-link

为每个标签添加必要的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

波旁威士忌填写如何链接到标签

1 个答案: