一种使用 Bootstrap 4 下拉菜单在部分之间进行选项卡的方法
我已经看到了 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
该问题是由于.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
随时随地看视频慕课网APP
相关分类
JavaScript