Why tabs are not changing nav nav-tabs?-CodePudding

I am using bootstrap for creating a tab list like below one:

The problem is that when I click on "Profile" or Contact, it changes nothing. I included the bootstrap library. I mean it doesn't remove the 'active', 'show' classes. Does someone know why?

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<ul  id="myTab" role="tablist">
  <li >
    <a  id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li >
    <a  id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li >
    <a  id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div  id="myTabContent">
  <div  id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div  id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div  id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

CodePudding user response：

Somewhat unsure which approach you're after. This can work out of the box with Bootstrap 5 but you also tag this with Bootstrap 4.

For version 5 they changed:

data-toggle

data-bs-toggle

Here is the approach with no additions and uses Bootstrap 5. Note your code example brings in jQuery and that isn't needed.

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Nav tabs -->
<ul  id="myTab" role="tablist">
  <li >
    <a  data-bs-toggle="tab" aria-controls="home" aria-selected="true" href="#home">Home</a>
  </li>
  <li >
    <a  data-bs-toggle="tab" href="#menu1">Profile</a>
  </li>
  <li >
    <a  data-bs-toggle="tab" href="#menu2">Contact</a>
  </li>
</ul>

<!-- Tab panes -->
<div  id="myTabContent">
  <div  id="home" role="tabpanel" aria-controls="home">
    Home
  </div>
  <div  id="menu1" role="tabpanel" aria-controls="profile">
    Profile
  </div>
  <div  id="menu2" role="tabpanel" aria-controls="contact">
    Contact
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>

CodePudding user response：

Used below script and worked smoothly

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})