I am writing this tutorial for myself really because I need to reference this. This is a place for me to do that in a single place.
Add this in the <head> tag:
Add this in the page you wish the tabs to be in:
And finally add this to the CSS document:
Add this in the <head> tag:
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate some tab $(".tab_content:first").show(); //Show some 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 rel attribute value to identify the active tab + content $(activeTab).show(); //Fade in the active content return false; }); }); </script> <link href="stylesheet.css" rel="stylesheet" type="text/css" />
<!-- Define Tabs --> <ul class="tabs"> <li><a href="#one">Tab 1</a></li> <li><a href="#two">Tab 2</a></li> <li><a href="#three">Tab 3</a></li> <li><a href="#four">Tab 4</a></li> </ul> <!-- Tab Content --> <div class="tab_container"> <div id="one" class="tab_content"> Test on one </div> <div id="two" class="tab_content"> Test on two </div> <div id="three" class="tab_content"> Test on three </div> <div id="four" class="tab_content"> Test on four </div> </div>
/*---- Tabs: tab definition ----*/ ul.tabs { margin: 0; padding: 0; float: left; list-style: none; border-left: 1px solid #8DAD86; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; border: 1px solid #8DAD86; border-left: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #8DAD86; } ul.tabs li a { text-decoration: none; color: #02101C; display: block; padding: 0 20px; border: 1px solid #8DAD86; outline: none; } ul.tabs li a:hover { background: #4C7A49; text-decoration: none; color: #02101C; } /*---- Tabs: html definition ----*/ html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #4C7A49; border-bottom: 1px solid #8DAD86; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 2px solid #8DAD86; border-top: 2px solid #8DAD86; overflow: hidden; clear: both; float: left; width: 100%; } .tab_content { padding: 0px 5px; }