Step 1: Include Jquery
<script src="{PATH TO JQUERY}/jquery.js'; ?" type="text/javascript"><!--mce:0--></script>Step 2: Creating Tab
<ul class="tabs">
<li><a href="#tab1">TAB 1</a></li>
<li><a href="#tab2">TAB 2</a></li>
<li><a href="#tab3">TAB 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Tab1 Content Here
<!-- TAB1 CONTAIN HERE --></div><!-- EOF TAB1-->
<div id="tab2" class="tab_content">
Tab2 Content Here
<!-- TAB2 CONTAIN HERE -->
</div><!-- EOF TAB2-->
<div id="tab3" class="tab_content">
Tab3 Content Here
<!-- TAB3 CONTAIN HERE -->
</div><!-- EOF TAB3-->
</div> <!-- EOF TAB CONTAINER -->
Step 3: Make It Work
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
activeTab = activeTab.split("#");
$("#"+activeTab[1]).fadeIn(); //Fade in the active ID content
return false;
});
});
Step 4: Adding Beauty
<style>
ul.tabs {margin: 0;padding: 0;float: left;list-style: none;margin-top:30px;border-bottom:1px solid #e9e9e9;}
ul.tabs li {float: left;margin: 0;padding: 0;height: 28px;width:135px;margin-bottom: -1px; overflow: hidden;position: relative;background: #5D99A3;font-family: arial;font-size:11px;margin-right:5px;text-align:center;}
ul.tabs li a {text-decoration: none;color: #fff;display: block;padding-top:9px;outline: none;}
ul.tabs li:hover {background:#ece6d3;color:#454545;}
ul.tabs li.active, ul.tabs li.active a:hover {background:#ece6d3;color:#454545;}
.tabs li.active a{color:#454545;}
.tab_container {border-top: none;overflow: hidden;clear: both;float: left;height: 533px;width: 470px;background: #ece6d3;margin:0 auto;border:1px solid #e9e9e9;border-top:0px;color:#454545;}
</style>Demo
Click here for the demo.
Loading ...