Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

jquery
html

How to use jQuery tabs

Chinweuba Elijah Azubuike

Overview

We often want to read selective headings without scrolling the page to find our content of interest. Alternatively, we may also want to access multiple areas of the website without visiting another page. We can achieve this by using tabs.

What are tabs?

Tabs are like navigation bars that can be used to access other website areas. However, they allow the user to remain on a single page as the content changes.

Code example

Let's see an example of implementing jQuery tabs to our website:

jQuery tabs

Code explanation

In the above example code, we add three tabs with some dummy content:

  • Lines 7 to 10: We connect the jQuery CSS and JavaScript files to work with the jQuery library.
  • Line 12: We use the tabs() function to make respective div IDs into tabs.
  • Line 19: We create a div, id="tabs", that contains a list of all our tabs.
  • Lines 20 to 24: We add our tabs links. Notice that the href of every a tag in the li tag is an id. We use this id to call the content of the individual tab content.
  • Lines 25, 28, and 31: We create a div which has the content of each tab respectively.

RELATED TAGS

jquery
html

CONTRIBUTOR

Chinweuba Elijah Azubuike
RELATED COURSES

View all Courses

Keep Exploring