We can create tab in pill menus that dynamically update content when a link is clicked as seen in this
example.
When a tab is clicked the content changes below
to create this.
We start with a well element and set the class to NAV and NAV tabs.
Next we create our list items that will serve as the tab links we can see here that we have for list
items and each one has its own label link one link to link 3 and link for each item must have an H R
F attribute with the link.
Name set to the div that contains the corresponding content.
For example link 1.
We can see that the H R F attribute is set to LB link 1.
This link will display the content inside this div with its I.D. set to link 1 but we'll come back to
this area in a moment.
The list item must also have a data toggle attribute set to tab.
So you can see that that's consistent all the way through
after our hour unordered list.
We create a div with the class tab content
this div will contain all of our content items we can see the first content item in this div it has
the link I.D..
Sorry it has the I.D. link 1.
It also has 4 classes tab pane feed in an active
the div element contains the heading you see here and the word content below the heading.
So here you can see link 1 in content which was which corresponds to what you see here
the next div here is for corn content.
Item corresponding to link 2.
So here we can see H.R. yes is that to link to our div I.D. is set to link to.
So remember those must always match
everything else is more or less the same.
The only thing that changes is padding your content.
Would also change and same for a div.
The third div the ideas linked 3.
The header is Link 3 and the same for the last ID which corresponds to link form and you can see that
the content switch is off.
And corresponds to its own link and that's how that works.
We can change this dynamic tab menu to a dynamic pill menu by updating a few classes so if we set if
you go back to your unordered list element and change the NAV tabs.
Class 2 def pills and also change the data toggle attribute to pill and if you save your file and refresh
you'll notice that the the links are now pills rather than tabs the functionality and everything else
is all the same.