<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> <script> $(document).ready(function() { $(&quot;.tab_content&quot;).hide(); //Hide all content $(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show(); //Activate first tab $(&quot;.tab_content:first&quot;).show(); //Show first tab content //On Click Event $(&quot;ul.tabs li&quot;).click(function() { $(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;); //Remove any &quot;active&quot; class $(this).addClass(&quot;active&quot;); //Add &quot;active&quot; class to selected tab $(&quot;.tab_content&quot;).hide(); //Hide all tab content var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); });</script>

ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 300px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 150px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 300px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ outline: none; } ul.tabs li a:hover { background: #ccc; } 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: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; }