显示全部标签和部分标签【jquery】

最新推荐文章于 2020-03-27 10:33:42 发布

叶子的翅膀

最新推荐文章于 2020-03-27 10:33:42 发布

阅读量783

点赞数

本文链接：https://blog.csdn.net/xiaoxiqinqinbaobao/article/details/8119605

版权

技术归档专栏收录该内容

153 篇文章 0 订阅

订阅专栏

    Html代码  
  
 <span style="">关于显示全部标签和部分标签的效果例子如下（锋利的jquery）</span>  

    Html代码  
  
 <!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>   

叶子的翅膀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
显示全部标签和部分标签【jquery】

Html代码 span style="">关于显示全部标签和部分标签的效果例子如下（锋利的jquery）span> Html代码 > html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/ht
复制链接

扫一扫

专栏目录