Bootstrap nav-tabs 功能在 asp webform 情况下在 4.6 版本中不起作用答案

【问题标题】：Bootstrap nav-tabs function not working in 4.6 version under asp webform situationBootstrap nav-tabs 功能在 asp webform 情况下在 4.6 版本中不起作用
【发布时间】：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 之间似乎存在冲突，是否有任何方法可以解决解决？非常感谢。

【问题讨论】：

标签： jquery asp.net bootstrap-4

【解决方案1】：

改用<li class="nav-item">，就可以很好的工作了。

【讨论】：