萬盛學電腦網 >> 腳本專題 >> javascript >> jquery選項卡的做法
jquery選項卡的做法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌的精選和顯示全部</title>
<style>
*{ margin:0; padding:0;}
body{ font-size:15px; text-align:center}
.showLess{ margin:auto; padding-top:30px; width:600px;}
.showLess ul li{ display:block; float:left; width:200px; line-height:20px;}
.showMore{ clear:both; padding-top:15px;}
a{ text-decoration:none;}
a:hover{ cursor:pointer; color:#F60; text-decoration:underline;}
</style>
<script language="javascript" type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(".showLess ul li:gt(2):not(:last)").hide();
$(".showMore a span").toggle(function(){
$(".showLess ul li:gt(2):not(:last)").slideDown("slow");
$(".showMore a span:last").text("精簡品牌");
$("#b").replaceWith("<b id='b'>-</b>");
return false;
},function(){
$(".showLess ul li:gt(2):not(:last)").slideUp("1000");
$(".showMore a span:last").text("顯示全部品牌");
$("#b").replaceWith("<b id='b'>+</b>");
return false;
})
$(".showLess ul li:last").click(function(){
$(".showLess ul li:gt(2):not(:last)").slideToggle();
return false;
});
})
</script>
</head>
<body>
<div class="showLess">
<ul>
<li><a href="#">美利達</a></li>
<li><a href="#">捷安特</a></li>
<li><a href="#">飛鴿</a></li>
<li><a href="#">寶島</a></li>
<li><a href="#">新日</a></li>
<li><a href="#">巴赫</a></li>
<li><a href="#">永久</a></li>
<li><a href="#">二八</a></li>
<li><a href="#">更多品牌</a></li>
</ul>
</div>
<div class="showMore">
<a href="#"><b id='b'></b><span>顯示全部品牌</span></a>
</div>
</body>
</html>
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved