Bootstrap 3 Essential Training, Controlling tabs with JavaScript

Tabs are a great way to organize certain types of content in a very concise base. They’re pretty easy to do with Bootstrap, so let’s take a look at what you would need to change this series of different categories into tabs. So, first, there’s going to be two pieces that we have to make.

The first one is the actual tabs. To do that, we’re going to need a list so that can be a UL with a class of “nav,” like this. And then inside, we’re going to need list items and in addition to the class of “nav,” we’re going to specify the navtype here, so you can say either “nav-tabs” or “nav-pills” depending on the design that you want.

Let’s go ahead and go with tabs first. We’ll also need to add a role, this is for screen readers, of “tablist.” So this just identifies this as something that will be a tablist. The screen readers will know what to do with this type of element if we give it a role. So, each one of the list items will also need a role, and in this case the role will be “presentation.” And then we just add the label that we want in here.

Leave a Reply

Notify of