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