For a quick and simplistic fix, my approach would involve implementing a click listener to toggle the display of tabs (removing the active show class from the tab) when the same link is clicked. Additionally, I would toggle the button's active class and remove the focus outline from the button:
let currentTab = '';
function toggleTabContent(event) {
const clickedButton = event.target;
if (clickedButton.getAttribute('id') === currentTab) {
const selectedTab = document.querySelector(clickedButton.getAttribute('data-bs-target'));
selectedTab.classList.toggle('show');
if (!selectedTab.classList.contains('show')) {
clickedButton.blur();
clickedButton.classList.toggle('active');
selectedTab.classList.toggle('active');
}
}
currentTab = clickedButton.getAttribute('id');
}
document.querySelectorAll('#myTabsContainer button').forEach(element => element.addEventListener('click', toggleTabContent));
Demo:
<script src="https://cdn.example.com/bootstrap.bundle.min.js"></script>
<link href="https://cdn.example.com/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" id="myTabsContainer" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabsContentArea">
<div class="tab-pane fade" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultricies neque eu turpis dapibus, nec hendrerit nibh malesuada. Proin imperdiet feugiat lacus, non volutpat urna sagittis nec. Etiam auctor nibh nec rhoncus fermentum. Fusce laoreet massa sem, a gravida lorem laoreet nec. Etiam justo tellus, ultricies nec mi a, lobortis tempor nulla.</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile: Phasellus molestie ornare eros non dapibus. Curabitur sed massa a mi tristique lobortis. Mauris rhoncus aliquam ante, vel convallis tellus scelerisque id. Nam vel tincidunt elit, ac convallis ipsum. Vivamus id nisi sit amet dui pellentesque tristique. Nunc lacinia, felis sit amet tincidunt dapibus, erat nisi fermentum massa, nec fringilla sem nulla ultrices risus.</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact: Integer consectetur non felis nec tempus. Fusce mauris ligula, sodales nec neque id, aliquam faucibus urna. Quisque ut sem sapien. Vestibulum congue, odio non bibendum bibendum, lorem sapien ultricies nunc, ut luctus elit dui ac ante. In mattis volutpat ipsum eu vehicula. Ut vel ornare massa. Nam mollis leo at erat mattis, vel interdum neque faucibus. Nullam fermentum accumsan erat, quis fermentum elit vestibulum at.</div>
</div>
<script>
let currentTab = '';
function toggleTabContent(event) {
const clickedButton = event.target;
if (clickedButton.getAttribute('id') === currentTab) {
const selectedTab = document.querySelector(clickedButton.getAttribute('data-bs-target'));
selectedTab.classList.toggle('show');
if (!selectedTab.classList.contains('show')) {
clickedButton.blur();
clickedButton.classList.toggle('active');
selectedTab.classList.toggle('active');
}
}
currentTab = clickedButton.getAttribute('id');
}
document.querySelectorAll('#myTabsContainer button').forEach(element => element.addEventListener('click', toggleTabContent));
</script>