Topic: How can I make Bootstrap Pills work with anchor links?
I want to set up Pills so they work like the Overview and API buttons at the top of this page: https://mdbootstrap.com/docs/standard/navigation/pills/#docsTabsOverview
Out of the box, they work like the examples (tab 1, tab 2, tab 3)
How can I make Pills work with anchor links so I can link directly to content?
You can take code from examples and add your content inside pills to achieve similar effect.
This is how you can connect anchor links with the content:
add href attribute with id of the tab-pane you want to controll:
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="tab1"
data-mdb-toggle="pill"
href="#content1"
role="tab"
aria-controls="content1"
aria-selected="true"
>Tab 1</a
>
Add tabs to the .tab-content wrapper:
<div class="tab-content">
<div
class="tab-pane fade show active"
id="content1"
role="tabpanel"
aria-labelledby="tab1"
>
Tab 1 content
</div>
</div>
I don't have LinkedIn. Can you please send Rick's email address so I can contact him about the plugin?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: MacBook Air M1
- Browser: Chrome
- OS: macOS Monterey
- Provided sample code: No
- Provided link: Yes