Demo: [You must be registered and logged in to see this link.]
Link bổ sung: [You must be registered and logged in to see this link.]
Các bạn có thể dùng box này để tạo các vùng show ảnh hoặc các tab menu!
Code:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/></script>
<script type='text/javascript'>
$(function(){
// loop though each link
$("a.acctitle").each(function(){
// add an event on click
$(this).click(function(){
// hide all div's with accContent class
$(".accContent").each(function(){
$(this).hide("slow");
});
// the main point of this script - Fetch ref attribute of
// title link and display the hidden div with that id
$("#"+$(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>Template Winniblog Blue</b></a>
<div id="first_section" class="accContent defaultAccordion">
<center><a href="#" target="_blank"><img src="http://c.upanh.com/upload/7/623/CS0.11836285_29781_1.png" alt=""/></a></center>
</div>
<a ref="second_section" class="acctitle"><b>Template WinniBlog Grown</b></a>
<div id="second_section" class="accContent">
<center><a href="#" target="_blank"><img src="http://c.upanh.com/upload/7/623/CS0.11836288_29781_1.png" alt=""/></a></center>
</div>
<a ref="third_section" class="acctitle"><b>Template WinniBlog Green</b></a>
<div id="third_section" class="accContent">
<center><a href="# target="_blank"><img src="http://c.upanh.com/upload/7/623/CS0.11836290_29781_1.png" alt=""/></a></center>
</div>
<a ref="four_section" class="acctitle"><b>Template WinniBlog Red</b></a>
<div id="four_section" class="accContent">
<center><a href="#" target="_blank"><img src="http://c.upanh.com/upload/7/623/3L0.11836291_29781_1.png" alt=""/></a></center>
</div>
<a ref="five_section" class="acctitle"><b>Tiện ích bổ sung</b></a>
<div id="five_section" class="accContent">
<center><img src="http://c.upanh.com//upload/1/905/XE0.4496346_25259_5792.png" alt=""/> Có thể thêm nhiều thẻ tiện ích bổ sung.</center>
</div>
</div>
Link bổ sung: [You must be registered and logged in to see this link.]
Các bạn có thể dùng box này để tạo các vùng show ảnh hoặc các tab menu!
Nguồn: Code1k