如何有顶部和底部标签引导标签随机工作

How to have top and bottom tabs for bootstrap tab work in tandom

本文关键字：标签 随机 工作 底部 顶部      更新时间：2023-09-26

我正在应用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>

我希望底部的选项卡相应地改变，当我点击顶部一次，反之亦然。

标签内容正在改变，但是两个标签-顶部和底部需要随机改变，即当我点击顶部的"配置文件"时-它需要使底部的"配置文件"活跃

我已经尝试使用数据目标搜索一些解决方案，但没有成功。我猜可能需要javascript或jquery。

任何建议或提示将不胜感激。

谢谢

试试这个:

$('.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');
})
  • 结果这里
  • 代码

这是一个在Bootstrap 4中工作的版本(类"active"应用于<a>元素，而不是<li>元素)。这个版本还自动为您创建底部选项卡:https://gist.github.com/epicfaace/fa31d5133d3dd89b7f0caf72ebba5af9

相关文章：