【jQuery】jQuery选择器 —— 示例

最新推荐文章于 2022-08-17 14:42:42 发布

王晓斌

最新推荐文章于 2022-08-17 14:42:42 发布

阅读量715

点赞数

分类专栏： JS.jQuery/jqGrid 文章标签： jQuery

本文链接：https://blog.csdn.net/robinjwong/article/details/40784025

版权

JS.jQuery/jqGrid 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

示例1

<html>  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
  <script language="javascript" type="text/javascript"  
           src="Jscript/jquery-1.11.1.js">  
  </script>
  <style>
    body{font-size:13px}
    #divFrame{border:solid 1px #666;
              width:301px;
              overflow:hidden}
    #divFrame .clsHead{background-color:#eee;padding:8px;
                       height:18px;cursor:hand}
    #divFrame .clsHead h3{padding:0px;margin:0px;float:left}
    #divFrame .clsHead span{float:right;margin-top:3px}
    #divFrame .clsContent{padding:8px}
    #divFrame .clsContent ul{list-style-type:none;
                             margin: 0px;padding:0px}
    #divFrame .clsContent ul li{float: left;
                                width:95px;height:23px;line-height:23px}
    #divFrame .clsBot{float: right;padding-top:5px;
                      padding-bottom:5px}
    .GetFocus{background-color:#eee}
  </style>  
  <script type="text/javascript">  
        $(function(){
            
        	// switch between 简化 and  更多
        	$(".clsBot > a").click(function(){
        	  if ($(".clsBot > a").text() == "简化"){
        		  $("ul li:gt(4):not(:last)").hide();
        		  $(".clsBot > a").text("更多");
        	  }else{
        		  $("ul li:gt(4):not(:last)").show().addClass("GetFocus");
        		  $(".clsBot > a").text("简化");
        	  }
        	})
        });
  </script>  
</head>  
  
<body> 
  <div id="divFrame">
    <div class="clsHead">
      <h3> 图书分类</h3>
      <span><img src="Images/a2.gif" alt=""/></span>
    </div>
    <div class="clsContent">
      <ul>
        <li><a href="#">小说</a><i> (1110) </i></li>
        <li><a href="#">文艺</a><i> (230) </i></li>
        <li><a href="#">青春</a><i> (1430) </i></li>
        <li><a href="#">少儿</a><i> (1560) </i></li>
        <li><a href="#">生活</a><i> (870) </i></li>
        <li><a href="#">社科</a><i> (1460) </i></li>
        <li><a href="#">管理</a><i> (1450) </i></li>
        <li><a href="#">计算机</a><i> (1780) </i></li>
        <li><a href="#">教育</a><i> (930) </i></li>
        <li><a href="#">工具书</a><i> (3450) </i></li>
        <li><a href="#">引进版</a><i> (980) </i></li>
        <li><a href="#">其他类</a><i> (3230) </i></li>
      </ul>  
      <div class="clsBot"><a href="#">简化</a>
        <img src= "Images/a5.gif" alt=""/>
      </div>
    </div>
  </div> 
</body>  
  
</html>

点击链接“简化”和“更多”：