Scenario
The content of my tab comes from another url address and I need to process a lazy bootstrap tab! Once the tab content has been visited, the url should no longer be loaded.
Proposal
I created some data attributes to handle getting another page on demand. After that, I set the tab as loaded, passing the tab to the static tab!
The three attributes
/*
Attributes:
data-lazy-url: string (required) to get
data-lazy-loaded: boolean (optional) default false, once true, the tab never load anymore
data-lazy-target: string (required) selector to element
*/
The Html
<a class="nav-link"
data-lazy-url="https://dev.to/raafacachoeira"
data-lazy-target="#MyTab"
data-toggle="tab"
href="#MyTab"
role="tab"
aria-controls="MyTab"
aria-selected="false">
My blog posts
</a>
And for the Tab Content
<div class="tab-pane" id="MyTab" role="tabpanel">
</div>
Top comments (0)