Bootstrap nav-tabs 功能在 asp webform 情况下在 4.6 版本中不起作用
Posted
技术标签:
【中文标题】Bootstrap nav-tabs 功能在 asp webform 情况下在 4.6 版本中不起作用【英文标题】：Bootstrap nav-tabs function not working in 4.6 version under asp webform situation 【发布时间】：2021-06-21 20:39:28 【问题描述】：我使用 Bootstrap 4.6 版本并尝试使用导航功能创建导航链接选项卡， 但是，当我单击屏幕中的另一个选项卡时，它不起作用。 sn-ps代码如下：
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../javascript/jquery-3.5.1.js"></script>
<script src="../JavaScript/jquery-migrate-1.4.1.js"></script>
<script src="../JavaScript/bootstrap.min.js"></script>
<script src="../JavaScript/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<style type="text/css">
@import url("../Css/bootstrap.min.css");
@import url("../Css/style.css");
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<ul class="nav nav-tabs" role="tablist">
<li>
<div class="nav-link" id="nav-home-tab" data-toggle="tab" role="tab" aria-controls="personal">AAA</div>
</li>
<li>
<div class="nav-link" id="nav-profile-tab" data-toggle="tab" role="tab" aria-controls="employment">BBB</div>
</li>
</ul>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="personal" role="tabpanel" aria-labelledby="nav-home-tab">
TESTING AAA
</div>
<div class="tab-pane fade" id="employment" role="tabpanel" aria-labelledby="nav-profile-tab">
TESTING BBB
</div>
</div>
</form>
</body>
</html>
有什么办法可以解决这个问题。 jquery 3.5.1 和 bootstrap 之间似乎存在冲突，是否有任何方法可以解决 解决？非常感谢。
【问题讨论】：
【参考方案1】：改用<li class="nav-item">，就可以很好的工作了。
【讨论】：
以上是关于Bootstrap nav-tabs 功能在 asp webform 情况下在 4.6 版本中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在不更改 URL 的情况下创建 Twitter Bootstrap 'nav-tabs' 菜单 - 可以吗？
Bootstrap nav-tabs 活动颜色为每个 Bootstrap 活动选项卡更改为不同的颜色
如何在：title nav-tab bootstrap vue.js 上添加图标 fontawesome？