bootstrap open tab from link data-toggle="tab"
Bootstrap Open Tab from Link with data-toggle="tab"
To open a tab in Bootstrap using a link with the attribute data-toggle="tab"
, you can use the following HTML structure:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#tab1" data-toggle="tab">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" data-toggle="tab">Tab 2</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade">
<!-- Tab 1 content goes here -->
</div>
<div id="tab2" class="tab-pane fade">
<!-- Tab 2 content goes here -->
</div>
</div>
In this example, clicking on the "Tab 1" or "Tab 2" link will open the corresponding tab content due to the data-toggle="tab"
attribute.
This setup allows you to create a tabbed interface that responds to link clicks without the need for JavaScript.
Reference: Bootstrap Tabs Documentation