javascript - 页面顶部和底部的 Bootstrap 3 导航选项卡？

Question

我正在使用 Bootstrap 3 构建网站，发现您确实可以在同一页面上同时放置顶部导航选项卡和底部导航选项卡部分。这两个单独的选项卡菜单将触发相同的选项卡内容区域显示/隐藏。

这样做可以很好地解决一个问题。这些选项卡彼此独立工作。我需要顶部和底部选项卡显示相同的事件选项卡。现在，如果您单击顶部选项卡菜单中的选项卡 4，它会将您带到选项卡 4，但底部菜单仍将事件选项卡显示为选项卡 1。

那么，Javascript/Jquery 可以解决这个问题吗？只需要它们充当相同的菜单即可。

在此先感谢您的帮助。

<div class="tabbable tabs-below">

应该匹配顶部导航标签。

http://jsfiddle.net/UT6ex/1/

Answer 1

不是监听原始点击，而是监听由 Bootstrap Tab class 触发的事件: show.bs.tab和 shown.bs.tab .这将确保 future 版本的 Bootstrap 标记不会破坏您的设置。

此代码查找 <li> shown 之后的元素添加和删​​除类的事件 ( working JSFiddle ):

$('a[data-toggle="tab"]').on('shown.bs.tab',
  function(event) {
    var $relatedTarget, $target;

    if (event.relatedTarget != null) {
      $relatedTarget = $(event.relatedTarget);
      $('a[data-toggle="' +
        $relatedTarget.attr('data-toggle') +
        '"][href="' +
        $relatedTarget.attr('href') +
        '"]').parent('li').removeClass('active');
    }

    if (event.target != null) {
      $target = $(event.target);
      $('a[data-toggle="' +
        $target.attr('data-toggle') +
        '"][href="' +
        $target.attr('href') +
        '"]').parent('li').addClass('active');
    }
  }
);