SKY外语计算机学习

标题: 列表的显示和隐藏--select练习 [打印本页]

作者: rogan    时间: 2012-5-26 21:23
标题: 列表的显示和隐藏--select练习
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf8">
  5.         <title>Untitled Document</title>
  6.         <script src="lib/jquery/jquery-1.4.2.js"></script>
  7.         <script language="JavaScript">
  8.             $(document).ready(function(){
  9.                 $(function(){
  10.                     var $category = $('ul li:gt(5):not(:last)');
  11.                     $category.hide();
  12.                     var $toggleBtn = $('div.showmore > a');
  13.                     $toggleBtn.click(function(){
  14.                         if($category.is(":visible")){
  15.                             $category.hide();
  16.                         $('.showmore a span')
  17.                         .css("background","#ffff00;")
  18.                         .text("显示全部品牌");
  19.                         $('ul li').removeClass("promoted");
  20.                         }else{
  21.                             $category.show();
  22.                         $('.showmore a span')
  23.                         .css("background","#c0c0c0;")
  24.                         .text("精简显示品牌");
  25.                         $('ul li').filter(":contains('佳能'),:contains('奥林巴斯')")
  26.                         .addClass("promoted");
  27.                         }
  28.                         
  29.                         return false;
  30.                         
  31.                     })
  32.                 })
  33.             });
  34.         </script>
  35.     <style>
  36.         .promoted{
  37.             background:red;
  38.         }
  39.         ul{
  40.             width:620px;
  41.         }
  42.         ul li{
  43.             float:left;
  44.             width:200px;
  45.         }
  46.         .showmore{
  47.             clear:both;
  48.             text-align:center;
  49.         }
  50.         .showmore span{
  51.             border:1px solid #000;
  52.         }
  53.     </style>
  54.     </head>
  55.    
  56.     <body>
  57.         <div class="SubCategoryBox">
  58.             <ul>
  59.                 <li><a href="#">佳能</a><i>(27220)</i></li>
  60.                 <li><a href="#">索尼</a><i>(20808)</i></li>
  61.                 <li><a href="#">三星</a><i>(17821)</i></li>
  62.                 <li><a href="#">尼康</a><i>(12289)</i></li>
  63.                 <li><a href="#">松下</a><i>(8242)</i></li>
  64.                 <li><a href="#">卡西欧</a><i>(14894)</i></li>
  65.                 <li><a href="#">富士</a><i>(9520)</i></li>
  66.                 <li><a href="#">柯达</a><i>(2195)</i></li>
  67.                 <li><a href="#">宾得</a><i>(4114)</i></li>
  68.                 <li><a href="#">理光</a><i>(12205)</i></li>
  69.                 <li><a href="#">奥林巴斯</a><i>(1466)</i></li>
  70.                 <li><a href="#">明基</a><i>(3091)</i></li>
  71.                 <li><a href="#">爱国者</a><i>(20440)</i></li>
  72.                 <li><a href="#">其他品牌</a><i>(7275)</i></li>
  73.             </ul>
  74.             <div class="showmore">
  75.                 <a href="#"><span>显示全部品牌</span></a>
  76.             </div>
  77.         </div>
  78.     </body>
  79. </html>

复制代码





欢迎光临 SKY外语计算机学习 (http://www.skywj.com/) Powered by Discuz! X2.5