javascript - 如何让 Bootstrap 选项卡的顶部和底部选项卡协同工作

Question

我正在将 Bootstrap 选项卡应用到我的网页。这里的挑战是我在标签内容的顶部和底部都有标签。

<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-top">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
   <div class="tab-pane active" id="home">...</div>
   <div class="tab-pane" id="profile">...</div>
   <div class="tab-pane" id="messages">...</div>
   <div class="tab-pane" id="settings">...</div>
</div>

<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-bottom">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

我希望当我点击一次顶部时，底部的标签相应地改变，反之亦然。

选项卡内容正在更改，但两个选项卡 - 顶部和底部需要同时更改，即当我单击顶部的“个人资料”时 - 它需要使底部的“个人资料”处于事件状态

我曾尝试使用 data-target 搜索一些解决方案，但没有成功。我猜可能需要 javascript 或 jquery。

如有任何建议或提示，我们将不胜感激。

谢谢

Answer 1

试试这个:

$('.nav-tabs-top a[data-toggle="tab"]').on('click', function(){
    $('.nav-tabs-bottom li.active').removeClass('active')
    $('.nav-tabs-bottom a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})

$('.nav-tabs-bottom a[data-toggle="tab"]').on('click', function(){
    $('.nav-tabs-top li.active').removeClass('active')
    $('.nav-tabs-top a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})

• 结果 here
• 代码 here