我已经看到了 bootstrap 3 的多个示例，您可以在其中dropdown在部分之间使用选项卡。我宁愿在我的应用程序中使用 bootstrap 4。我在 bootstrap 的文档中看到，您可以拥有选项卡导航链接，当您单击一个链接时，该部分会添加一个活动类，然后从上一部分中删除活动类。我尝试将其用于dropdown链接，它确实将活动类添加到相应的部分，但它不会从上一部分中删除活动类。有什么我想念的吗？请记住，我不是专业程序员，但这是我的爱好，我正在尝试制作一个简单的应用程序来帮助我在我的工作领域。这是我所指的一个示例，它显示了该部分，但不会从前面的部分中删除活动类，因此如果需要，则无法返回到上一个部分。是否需要在此处添加一个javascriptorjquery函数才能使其成为可能？任何帮助将不胜感激。<!DOCTYPE html><html><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body> <div class="container mt-3"> <h2>Toggleable Tabs</h2> <br> <!-- Nav tabs --> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu nav-tabs"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </div> </div>
1 回答
慕虎7371278
TA贡献1802条经验 获得超4个赞
该问题是由于.active类未从tab. 根据一些答案ul用于选择您正在使用的元素，<div>因此您需要在.active如下所示的选项卡打开或覆盖选项卡插件时删除类
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$(e.target).addClass('active').siblings().removeClass("active"); // activated tab
});
工作示例：https : //jsbin.com/cujewejezi/edit?html,js,output
添加回答
举报
0/150
提交
取消