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:
[html]
<ul class=”tabs”>
<li><a href=”#tab1″>One</a></li>
<li><a href=”#tab1″>Two</a></li>
<li><a href=”#tab1″>Three</a></li>
<li><a href=”#tab1″>Four</a></li>
<li><a href=”#tab1″>Five</a></li>
</ul>
<div class=”tabContainer”>
<div id=”tab1″ class=”tabContent”>
<h2>One</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
</div>
<!– / END #tab1 –>

<div id=”tab2″ class=”tabContent”>
<h2>Two</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
</div>
<!– / END #tab2 –>
<div id=”tab3″ class=”tabContent”>
<h2>Three</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
</div>
<!– / END #tab3 –>
<div id=”tab4″ class=”tabContent”>
<h2>Four</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
</div>
<!– / END #tab4 –>
<div id=”tab5″ class=”tabContent”>
<h2>Five</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
</div>
<!– / END #tab5 –>
</div>
<!– / END .tabContainer –>
[/html]
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:
[css]
<pre>ul.tabs {
float:left;
list-style:none;
height:32px;
width:100%;
border-radius:8px 0 -50px 0;
margin:0;
padding:0;
}

ul.tabs li {
float:left;
height:31px;
line-height:31px;
border:1px solid #999;
overflow:hidden;
position:relative;
background:#e0e0e0;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
margin:0 5px -1px 0;
padding:0;
}

ul.tabs li a {
text-decoration:none;
color:#000;
display:block;
font-size:1.2em;
border:1px solid #fff;
outline:none;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
padding:0 20px;
}

ul.tabs li a:hover {
background:#ccc;
}

html ul.tabs li.active,html ul.tabs li.active a:hover {
background:#fff;
border-bottom:1px solid #fff;
}

.tabContainer {
border:1px solid #999;
overflow:hidden;
clear:both;
float:left;
width:100%;
background:#fff;
-webkit-border-radius:8px;
-webkit-border-top-left-radius:0;
-moz-border-radius:8px;
-moz-border-radius-topleft:0;
border-radius:8px;
border-top-left-radius:0;
}

.tabContent {
font-size: 12px;
padding:20px;
}</pre>
[/css]
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.
[javascript]
$(document).ready(function() {
//hiding tab content except first one
$(“.tabContent”).not(“:first”).hide();
// adding Active class to first selected tab and show
$(“ul.tabs li:first”).addClass(“active”).show();

// Click event on tab
$(“ul.tabs li”).click(function() {
// Removing class of Active tab
$(“ul.tabs li.active”).removeClass(“active”);
// Adding Active class to Clicked tab
$(this).addClass(“active”);
// hiding all the tab contents
$(“.tabContent”).hide();
// showing the clicked tab’s content using fading effect
$($(‘a’,this).attr(“href”)).fadeIn(‘slow’);

return false;
});

});
[/javascript]
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

8 replies
  1. gfdgdfgsdfgsdgds
    gfdgdfgsdfgsdgds says:

    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.

    Reply
  2. Steve
    Steve says:

    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.

    Reply
    • Steve
      Steve says:

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

      Tab Activation – jQuery, section above.

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *