nav-tabs doesn't change on click

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.

bootstrap 4 html javascript

Add your own answers!

Ask a Question

Get help from others!