Boostrap 导航选项卡使用锚链接来显示选项卡

Question

当前使用 bootstrap 5.0（只是直接 html/css），并且无法确定如何获取锚链接来打开选项卡。

<div class="tab-content" id="tabContent">
  <div class="tab-pane fade show active" id="home">
    CONTENT FOR HOME
  </div>
  <div class="tab-pane fade show" id="onboard">
    <a href="#build" data-bs-toggle="tab" data-bs-target="#build">Show Build tab</a>
  </div>
  <div class="tab-pane fade show active" id="build">
    CONTENT FOR HOME
  </div>
</div>


<ul class="info-navigation" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Start</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-onboard-tab" data-bs-toggle="pill" data-bs-target="#onboard" type="button" role="tab" aria-controls="pills-onboard" aria-selected="false">1</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-build-tab" data-bs-toggle="pill" data-bs-target="#build" type="button" role="tab" aria-controls="pills-build" aria-selected="false">2</button>
  </li>
</ul>

只是希望能够在选项卡面板本身中添加锚链接或按钮，以打开下一个/目标选项卡。

尝试使用

data-bs-toggle="pill" data-bs-target="#build"

但并没有真正起作用。

Answer 1

您可以利用 Bootstrap 的 JavaScript API。通过在链接中添加事件监听器并使用

Tab.show()

方法，您可以切换到您需要的选项卡

参考链接：https://getbootstrap.com/docs/5.3/components/navs-tabs/#methods

    document.getElementById('openBuildTab').addEventListener('click', function(event) {
        event.preventDefault();
        var buildTab = new bootstrap.Tab(document.getElementById('pills-build-tab'));
        buildTab.show();
    });

<div class="container mt-5">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="pills-onboard-tab" data-bs-toggle="pill" data-bs-target="#onboard" type="button" role="tab" aria-controls="pills-onboard" aria-selected="false">Onboard</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="pills-build-tab" data-bs-toggle="pill" data-bs-target="#build" type="button" role="tab" aria-controls="pills-build" aria-selected="false">Build</button>
        </li>
    </ul>

    <div class="tab-content" id="tabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="pills-home-tab">
            CONTENT FOR HOME
        </div>
        <div class="tab-pane fade" id="onboard" role="tabpanel" aria-labelledby="pills-onboard-tab">
            <a href="#" id="openBuildTab">Show Build tab</a>
        </div>
        <div class="tab-pane fade" id="build" role="tabpanel" aria-labelledby="pills-build-tab">
            CONTENT FOR BUILD
        </div>
    </div>
</div>