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>

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

标签内容正在发生变化，但两个标签 - 顶部和底部需要在tandom中更改，即当我点击＆＃34; Profile＆＃34;在顶部 - 它需要制作＆＃34; Profile＆＃34;在底部活跃

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

Answer 2

这是一个适用于Bootstrap 4的版本（“active”类应用于<a>元素，而不是<li>元素。此版本还会自动为您创建底部标签：https://gist.github.com/epicfaace/fa31d5133d3dd89b7f0caf72ebba5af9

如何使引导选项卡的顶部和底部选项卡协同工作

2 个答案: