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

SĂN BẮT CÁ KHÔNG CHỈ ĐE DOẠ ĐẾN ĐỜI SỐNG CỦA ĐAI DƯƠNG MÀ CÒN ĐE DOẠ ĐẾN SỰ TỒN TẠI CỦA LOÀI GẤU.

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.

<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>