Simple jQuery Tabs CSS & jQuery

Simple jQuery Tabs CSS & jQuery

I am here with the tutorial to learn how to make simple jQuery Tabs using CSS & jQuery. There are many tutorials already available online & you might be following them too but I have tried to write it in my own way so that it’s easy for mere a beginner to easily & quickly understand the concept behind this.

Here is the sample how our CSS tabs gonna look & work after all designing & coding.

Various steps are:

1) HTML Code:

We make unordered list for the tabs. Concept of internal linking in HTML has been used. Each element in the unordered list consists of element ‘a’ having ‘href’ attribute which describes the place or element where a link has to be redirected on mouseclick. These are preceeded by special character ‘#’ because of internal linking.

This unordered list is followed by the class ‘tabContainer’ which contains the content for corresponding tab described in divs with class ‘tabContent’. Make note that the attribute of ‘href’ in each list item(tabs) matches the ID of the “.tabContent” div. Its important for the jQuery to pull off the actions.

Here the generic names like ‘tab1’, ‘tab2’, etc have been used to make it easily understandable. In reality, Keywords must be used to make it Search Engine Optimization(SEO) friendly.
The HTML code is as shown below:

The output will be like :

2) CSS:

The style sheet to define the style for Unordered List, Tab Container, etc. is defined as per the redirement of the coder in CSS file. Here as per my need I have written the CSS as under:

The output will be as shown below:

3) Tab Activation – jQuery:

For those who are not familiar with jQuery, check out their site for a general overview.
The following script contains comments explaining which jQuery actions are being performed.

Final output will be as shown below:

Conclusion

So there we have it, a nice and simple tab function with CSS and jQuery. If you have any questions, comments, or suggestions, please feel free to ask!

You can download the zip files from this link.Download

I am going to add a description of myself as soon as I get the time!

  • Martin

    Very nice and clean. Thanks!

    One minor error is that on the href of the html code is always the same, but should be like this:

    One

    Two

    Three

    Four

    Five

    • I dont know shit

      How do you utilize the Href attribute without the a tags?

  • BHEESHAM SHARMA

    how to move into tabs using TabKey

  • gfdgdfgsdfgsdgds

    How can I make it so it only clicks the selected tab once? If I keep clicking the “active” tab, the content refreshes, flashing constantly.

  • Steve

    Really nice example.
    Is there a way to make a specific tab active when the page loads?
    If the user submits a form in tab 3, I would like tab 3 to be active when the page reloads.

    • Steve

      Use pseudo-class eq() inplace of “first” to set starting Active tab. Lines 3 & 5 in the

      Tab Activation – jQuery, section above.

  • Sue Bair

    How can I link to a tab from within another tab?

  • nice 🙂