如何在引导中具有用于引导选项卡的顶部和底部选项卡

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>

我希望单击一次顶部时相应地更改底部选项卡，反之亦然。

标签内容正在更改，但是两个标签-顶部和底部需要同时改变，即当我单击顶部的“个人资料”时-它需要使底部的“个人资料”处于活动状态

我尝试使用数据目标搜索一些解决方案，但没有成功。 我猜可能需要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');
})

• 结果在这里
• 在这里编码

Answer 2

这是可以在Bootstrap 4中使用的版本（“ active”类应用于<a>元素，而不是<li>元素）。 此版本还会自动为您创建底部选项卡： https : //gist.github.com/epicfaace/fa31d5133d3dd89b7f0caf72ebba5af9