Exploring the world of Bootstrap 5 tabs led me to copy and paste code from the official documentation (https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior), but unfortunately, it's not functioning as expected: clicking on a tab doesn't activate it. I've already removed any custom .css and .js files, and experimented with placing the code outside the .container div.
Below is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d322d33">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Tabs</title>
</head>
<body>
<div class="container">
<!--this is the copy/paste from the bootstrap documentation and it does not work.-->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci mollitia, quasi rerum corrupti fugit iste ipsam saepe ut enim dolore quaerat libero autem voluptate dicta, aliquam, consectetur provident doloremque expedita.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci mollitia, quasi rerum corrupti fugit iste ipsam saepe ut enim dolore quaerat libero autem voluptate dicta, aliquam, consectetur provident doloremque expedita.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci mollitia, quasi rerum corrupti fugit iste ipsam saepe ut enim dolore quaerat libero autem voluptate dicta, aliquam, consectetur provident doloremque expedita.</p>
</div>
</div> <!--tab-content-->
</div><!--container-->
<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ececf7f0f7f1e2f3c3b6adb2adb3">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
Attempting to switch content by pressing another tab results in the top link bar appending #profile, #contact, #home at the end.