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:


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!