如何让引导标签的顶部和底部标签同时工作

Question

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

<!-- 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');
})

• 结果在这里
• 代码在这里