zoukankan      html  css  js  c++  java
  • jquery 学习笔记二 隐藏与显示

    css找到元素后是添加样式,而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=utf-8" />
    <title>无标题文档</title>
    <script src="js/jquery-1.7.2.min.js"></script>
    </head>
    <style type="text/css">
    .subtn{}
    ul{ list-style:none; 500px; margin:auto}
    ul li{ float:left; margin:0 20px 0 20px; 120px; text-align:center;}
    .clear{ clear:both}
    .morebtn{ 500px; text-align:center; height:50px; line-height:50px; margin:auto}
    .promoted{ color:blue;}
    </style>
    <script type="text/javascript">
    $(function(){
      var $subtn=$('ul li:gt(5):not(:last)');
      $subtn.hide();
      var $morebtn=$('.morebtn a');
      $morebtn.click(function(){
         if($subtn.is(":visible")){
            $('.morebtn a span').css('color','red').text('显示全部品牌');
            $('ul li').removeClass("promoted");
            $subtn.hide();
         }
         else{
            $('.morebtn a span').css('color','red').text('精简显示品牌');
            $('ul li').filter(":contains('佳能3'),:contains('佳能4'),:contains('佳能6'),:contains('佳能8')").addClass("promoted");
            $subtn.show();
         }
            return false;
          
      });
     
     
    });
    </script>
    <body>
    <div class="subtn">
       <ul>
          <li><a href="#">佳能1</a><i>300301</i></li>
          <li><a href="#">佳能2</a><i>300302</i></li>
          <li><a href="#">佳能3</a><i>300303</i></li>
          <li><a href="#">佳能4</a><i>300304</i></li>
          <li><a href="#">佳能5</a><i>300305</i></li>
          <li><a href="#">佳能6</a><i>300306</i></li>
          <li><a href="#">佳能7</a><i>300307</i></li>
          <li><a href="#">佳能8</a><i>300308</i></li>
          <li><a href="#">佳能9</a><i>300309</i></li>
          <li><a href="#">佳能10</a><i>3003010</i></li>
          <li><a href="#">佳能11</a><i>3003011</i></li>
          <li><a href="#">佳能12</a><i>3003012</i></li>
          <li><a href="#">佳能13</a><i>3003013</i></li>
          <li><a href="#">佳能14</a><i>3003014</i></li>
          <li><a href="#">佳能15</a><i>3003015</i></li>
          <li><a href="#">佳能16</a><i>3003016</i></li>
       </ul>
    </div>
    <div class="clear"></div>
    <div class="morebtn">
       <a href="#"><span>显示全部品牌</span></a>
    </div>
    </body>
    </html>

  • 相关阅读:
    C#获取EF实体对象或自定义属性类的字段名称和值
    Android 短信广播接收相关问题
    Silverlight5 Tools安装失败及解决方案
    验证码刷新
    Silverlight动态生成控件实例
    spring 属性注入
    asp.net XMLHttpRequest 进度条以及lengthComputable always false的解决办法
    Spring.Net 初探之牛刀小试
    iframe载入页面过程显示动画效果
    一次让人晕到吐血的接包经历
  • 原文地址:https://www.cnblogs.com/bm20131123/p/4593129.html
Copyright © 2011-2022 走看看