Posted July 22nd 2013, 3:26 am

CSS:

Code:

<style type="text/css">
#tabswitch{font-family:Arial;font-size:12px;}
#tabswitch ul{list-style:none;margin:0;padding:0;clear:both;height:27px;}
#tabswitch ul li{float:left;margin:0;padding:5px;width:100px;border:solid 1px #EFEFEF;border-bottom:solid 1px #ffffff;cursor:pointer;}
#tabswitch ul li.active{background-color:#EFEFEF;border-bottom:solid 1px #EFEFEF}
#tabswitch ul li:hover{font-weight:bold;}
#tabswitch .tab-container{border:solid 1px #EFEFEF;padding:10px;background-color:#EFEFEF;display:none;}
</style>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#tabswitch ul li:first").addClass("active");
jQuery("#tabswitch div.tab-container:first").show();

jQuery("#tabswitch ul li").click(function(){
jQuery("#tabswitch div.tab-container").hide();
jQuery("#tabswitch ul li").removeClass("active");

var tab_class = jQuery(this).attr("class");

jQuery("#tabswitch div." + tab_class).show();
jQuery("#tabswitch ul li." + tab_class).addClass("active");
})
});
</script>

HTML:

Code:

<div id="tabswitch">

<ul>
<li class="tab1">Tab 1</li>
<li class="tab2">Tab 2</li>
<li class="tab3">Tab 3</li>
</ul>

<div class="tab-container tab1">
Content for Tab 1
</div>

<div class="tab-container tab2">
Content for Tab 2
</div>

<div class="tab-container tab3">
Content for Tab 3
</div>

</div>

Error:


How do you be completed to appear and content2 content3 content1

Posted July 23rd 2013, 2:59 am

Posted July 23rd 2013, 5:55 am

Posted August 9th 2013, 11:57 pm

Still need this?  

Posted August 19th 2013, 11:29 am

Posted