Submodule 10.1: Tabs and Tabbed Navigation

Open the aboutus.html page and move to the second content row containing the details of the corporate leadership of the restaurant.

Right after the Corporate Leadership heading, introduce the following code to set up the tabbed navigation: 

Code

Note the use of the <ul> tag with the nav and nav-tabs classesto set up the tab navigation.

Each list item within the list acts as the tab element. Within each list item, note that we set up the <a> tags with the href pointing to the id of the tab pane of content to be introduced later.

Also note that the <a> tag contains the data-toggle=tab attribute. The first list element's <a> tag contains the class active. This tab will be the open tab when we view the web page.

We can switch to the other tabs using the tabbed navigation that we just set up.