时间戳

首页 > 解决方案 > 导航标签在点击时不会改变

javascript - 导航标签在点击时不会改变

问题描述

我正在使用引导程序 4.3。

我有一个结构如下的导航栏：

<head>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
     <div class="container-fluid">
          <nav class="nav nav-tabs" id="nav-tab" role="tablist">
               <a class="nav-item nav-link active" id="nav-complete-tab" data-toggle="tab" href="#complete" role="tab" aria-controls="nav-complete" aria-selected="true">Complete</a>
               <a class="nav-item nav-link" id="nav-summary-tab" data-toggle="tab" href="#summary" role="tab" aria-controls="nav-summary" aria-selected="false">Summary</a>
          </nav>
          <div class="tab-content" id="nav-tabContent">
                <div id="complete" role="tabpanel" class="tab-pane fade show active" aria-labelledby="nav-complete-tab"> ... </div>
                <div id="summary" role="tabpanel" class="tab-pane fade" aria-labelledby="nav-summary-tab"> ... </div>
          </div>
     </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

活动（#complete）窗格正确显示，但是当我尝试通过单击导航栏访问第二个（#summary）时，什么也没有发生。不加载#summary div 的内容

使用内置的 Mozilla 调试器在悬停或单击导航选项卡项目时也会带来 javascript 错误，不知道是否相关。

Uncaught TypeError: t is null
    onLoad applyStyle.js:57
    t index.js:69
    t index.js:67
    toggle dropdown.js:176
    _jQueryInterface dropdown.js:381
    jQuery 2
    _jQueryInterface dropdown.js:368
    onload (index):100
    jQuery 2

编辑：为清楚起见，将代码的每一部分合并在一起。此外，它是在 Django 框架下运行的 Web 应用程序，v2.2 可能不相关，但谁知道。

标签： javascripthtmlbootstrap-4

解决方案

推荐阅读