- <span style="">关于显示全部标签和部分标签的效果例子如下(锋利的jquery)</span>
- <!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>