Tab dạng thẻ với hiệu ứng trượt

Box chứa nội dung và các tab sẽ được xếp dọc thành các thẻ với hiệu ứng trượt khi click, các tab đều được tích hợp jQuery nên tạo hiệu ứng trượt rất đẹp và mượt.

Demo


<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$("a.acctitle").each(function(){
$(this).click(function(){
$(".accContent").each(function(){
$(this).hide("slow");
});

$("#"+$(this).attr("ref")).show("slow");
return;
});
});
});
//]]>
</script>


<style type='text/css'>
.accordion{
width:400px;
}
.accContent{
display:none;
border:1px solid #cccccc;
padding:3px;
}
.acctitle{
display:block;
width:100%;
padding:3px 0px 3px 3px;
background-color:#cccccc;
color:#000000;
cursor:pointer
}
.defaultAccordion{
display:block;

}
</style>

<div class="accordion">
<a ref="first_section" class="acctitle"><b>Tab 1</b></a>
<div id="first_section" class="accContent defaultAccordion">
<center><a href="http://www.code1k.com" target="_blank"><img src="http://4.bp.blogspot.com/-FM_0ax4RlwY/UAUDQ1A5upI/AAAAAAAAI2M/MHokyW4FsM0/s600/code1k_circle_2.jpg" alt="" style="width:380px;"/></a></center>
</div>

<a ref="second_section" class="acctitle"><b>Tab 2</b></a>
<div id="second_section" class="accContent">
<center><a href="http://www.code1k.com" target="_blank"><img src="http://1.bp.blogspot.com/-j1ujTUanCRo/UAUDX8vrDDI/AAAAAAAAI20/zqxXMjcVCsY/s600/code1k_circle_7.jpg" alt="" style="width:380px;"/></a></center>
</div>

<a ref="third_section" class="acctitle"><b>Tab 3</b></a>
<div id="third_section" class="accContent">
<center><a href="http://www.code1k.com" target="_blank"><img src="http://1.bp.blogspot.com/-Sq5DlDe6gzc/UAUDPbvmDGI/AAAAAAAAI2E/x4K4sNjUDVA/s600/code1k_circle_1.jpg" alt="" style="width:380px;"/></a></center>
</div>

<a ref="four_section" class="acctitle"><b>Tab 4</b></a>
<div id="four_section" class="accContent">
<center><a href="http://www.code1k.com" target="_blank"><img src="http://4.bp.blogspot.com/-25733i_FsYw/UAUDa-0sxhI/AAAAAAAAI3E/FWAdNJvRzsY/s600/code1k_circle_9.jpg" alt="" style="width:380px;"/></a></center>
</div>

<a ref="five_section" class="acctitle"><b>Tab more</b></a>
<div id="five_section" class="accContent">
<center><img src="http://2.bp.blogspot.com/-FLGeI8OXgZA/UA-uu5JdIhI/AAAAAAAAJF0/9SQG7qk6dx8/s1600/gem-options-code1k.com.png" alt=""/> Hoặc bạn có thể thêm nhiều thẻ tiện ích khác...</center>
</div>
</div>