关于显示全部标签和部分标签的效果例子如下(锋利的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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//从第5条开始隐藏后面的li,最后一个li除外
var $category=$("ul li:gt(5):not(:last)");
$category.hide();
//点击show all时执行全部显示操作,并把文本改为show some,并高亮推荐的li
var $toggleBtn=$("div.showmore >a");
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide();
$(".showmore a span").text("show all");
$("ul li").filter(":contains('bb'),:contains('cc'),:contains('dd')").removeClass("promoted");
}else{
$category.show();
$(".showmore a span").text("show some");
$("ul li").filter(":contains('bb'),:contains('cc'),:contains('dd')").addClass("promoted");
}
return false; //超链接不跳转
});
});
</script>
<style type="text/css">
.Box{
width:400px;
height:250px;
margin:0 auto;
text-align:center;
border:#CC3300 double;
background-color:#FFCC00;
}
.Box ul{
list-style-type:none;
}
.Box ul li{
float:left;
margin:10px 20px 10px 20px;
}
.showmore{
width:80px;
height:25px;
border:double red thin;
background-color:#FF6633;
}
.showmore a{
text-decoration:none;
}
.div1{
margin:0 auto;
width:400px;
}
.promoted{
color:#0000CC;
background-color:#009900;
}
</style>
</head>
<body>
<div class="Box">
<ul>
<li><a href="#">aaa</a><i>(111)</i></li>
<li><a href="#">bb</a><i>(112)</i></li>
<li><a href="#">aaa</a><i>(113)</i></li>
<li><a href="#">cc</a><i>(114)</i></li>
<li><a href="#">aaa</a><i>(115)</i></li>
<li><a href="#">aaa</a><i>(116)</i></li>
<li><a href="#">aaa</a><i>(117)</i></li>
<li><a href="#">aaa</a><i>(118)</i></li>
<li><a href="#">aaa</a><i>(119)</i></li>
<li><a href="#">aaa</a><i>(120)</i></li>
<li><a href="#">aaa</a><i>(121)</i></li>
<li><a href="#">dd</a><i>(122)</i></li>
<li><a href="#">aaa</a><i>(123)</i></li>
<li><a href="#">aaa</a><i>(124)</i></li>
<li><a href="#">other</a><i>(125)</i></li>
</ul>
<br/>
<br/>
<div class="div1">
<div class="showmore">
<a href="more.html"><span>show all</span></a>
</div>
</div>
</div>
</body>
</html>