Bootstrap JavaScript does not toggle tabs-CodePudding

I read the Bootstrap Introduction, the Navs and tabs page, this answer and many other, still I cannot figure out what is my mistake.

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

<div  role="tablist">
  <button  data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i ></i> Systems</button>
  <button  data-bs-target="#tabUpgrades"><i  data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"></i> Upgrades</button>
</div>


<div >
  <div id="tabSystems"  role="tabpanel">
    aaaaa
  </div>
  <div id="tabUpgrades"  role="tabpanel">
    bbbbb
  </div>
</div>

As you can see the tabs does not toggle. From what I learnt:

include JQuery before Bootstrap: done
set data-bs-toggle and data-bs-target: done
use classes like nav-link, tab-pane, etc... : done

What still am I missing?

CodePudding user response：

It wasn't easy to spot but you have an error on your second button

you put data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades" into the <i> tag

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

<div  role="tablist">
  <button  data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i ></i> Systems</button>
  <button  data-bs-target="#tabUpgrades" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"><i  ></i> Upgrades</button>
</div>


<div >
  <div id="tabSystems"  role="tabpanel">
    aaaaa
  </div>
  <div id="tabUpgrades"  role="tabpanel">
    bbbbb
  </div>
</div>