jquery选项卡的做法

　2013-04-01 20:18:14　来源：开发学院　　　

核心提示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmln

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