Currently using bootstrap 5.0 (just straight html/css) and am having trouble figuring how to get an anchor link to open up a tab.
<code><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>
</code>
<code><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>
</code>
<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>
Just want to be able to add anchor links or buttons within the tab panels itself that would open up the next/targeted tab.
Tried using the data-bs-toggle="pill" data-bs-target="#build"
but didn’t really work.
New contributor
Tiff is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.