Stack Overflow Asked by Beureu on November 20, 2021
I’m using Bootstrap 4.3.
I have a navigation bar structured like this:
<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>
The active (#complete) pane shows up correctly, but when I try to access the second one (#summary) by clicking on the navbar, nothings happens. Doesn’t load up the content of #summary div
Using in-built Mozilla debugger bring a javascript error when hovering or clicking on nav-tab items too, don’t know if it’s related.
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
EDIT: Merged every portion of code together for the sake of clarity.
Also, it’s a web application running under Django framework, v2.2 probably not related but who knows.
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP