引导选项卡不更改内容

Question

I'm trying to integrate bootstrap tabs in one of our pages. I've copied the example from https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior but the tabs are not working correctly (they show up correctly but when I click on a tab, nothing happens).

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" 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" type="button" role="tab" aria-controls="profile" 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" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">contact</div>
</div>

Both bootstrap and jQuery are installed:

"bootstrap": "^4.6.1",
"jquery": "^3.6.0",

and bundled correctly (has other pages use them as well).

What could be the reason that the content isn't changing? Do I have to add JS code manually?

Thanks in advance

Edit: I've tried registering the click events for each tab. When clicking on a tab, it console logs the corresponding message but does not show the correct content...

$(document).on('click', '#home-tab', function (event) {
    event.preventDefault();
    console.log('home clicked')
    $('#myTab a[href="#home"]').tab('show')
})

$(document).on('click', '#profile-tab', function (event) {
    event.preventDefault();
    console.log('profile clicked')
    $('#myTab a[href="#profile"]').tab('show')
})

$(document).on('click', '#contact-tab', function (event) {
    event.preventDefault();
    console.log('contact clicked')
    $('#myTab a[href="#contact"]').tab('show')
}) 

Answer 1

Following the official Bootstrap guide, it looks like you need to add the Javascript code manually:

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

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

You can activate individual tabs in several ways:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab

Answer 2

如果您使用的是 Bootstrap 4，请将data-bs-toggle data-bs-target target 分别替换为data-toggle data-target 。