显示全部标签和部分标签

最新推荐文章于 2023-08-08 10:34:44 发布

叶子的翅膀

最新推荐文章于 2023-08-08 10:34:44 发布

阅读量629

点赞数

文章标签： jquery 显示全部标签部分 ViewUI

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

版权

技术归档专栏收录该内容

153 篇文章 0 订阅

订阅专栏


关于显示全部标签和部分标签的效果例子如下（锋利的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>

叶子的翅膀

关注

0
点赞
踩
0

收藏

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

关于显示全部标签和部分标签的效果例子如下（锋利的jquery）&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3....
复制链接

扫一扫

专栏目录