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触发的事件。这将确保未来版本的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');
    }
  }
);

Answer 2

这样的确如此，我想：

$('.nav-tabs').find('li').on('click', function(){
    var location = $(this).find('a').attr('href'),
    children = $('.nav-tabs').find('li'),
    links = children.find('a');
    links.each(function() {
        var mi        = $(this),
            miHrefs   = mi.attr("href"),
            miParents = mi.closest('li');

        miParents.removeClass('active');
        if(miHrefs == location) 
        {            
            miParents.addClass("active");
        }
    });  
})

好的，这很好用。看看http://jsfiddle.net/UT6ex/4/。

页面顶部和底部的Bootstrap 3 Nav选项卡？

2 个答案: