网站品牌列表

<!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>
<style type="text/css">
 *{
  margin:0px;
  padding:0px;
 }
 body{
  font-size:14px;text-align:center;
 }
 a,a:visited{
  color:#04D;text-decoration:none;
 }
 a:hover{
  color:#F50;text-decoration:underline;
 }
 .subcategorybox{
  width:600px;
  margin: 0px auto;
  text-align:center;
  margin-top:40px;
 }
 .subcategorybox ul{
  list-style:none;
 }
 .subcategorybox ul li{
  float:left;
  width:200px;
  display:block;
  text-align:left;
  line-height:20px;
 }
 .showmore{
  clear:both;
  text-align:center;
  padding-top:20px;
 }
 .showmore a{
  display:block;
  width:120px;
  margin:0 auto;
  line-height:24px;
  border:1px solid #AAA;
 }
 .showmore a span{
  padding-left:15px;
  background:url(img/down.gif) no-repeat 0 0;
 }
 .promoted a {
  color:#F50;
 }
</style>
<script language="javascript" src="js/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript">
 $(function(){
  var $category= $('ul li:gt(5):not(:last)');
  $category.hide();
  var $toggleBtn=$('.showmore > a');
  $toggleBtn.click(function(){
   if($category.is(":visible")){
    $category.hide();
    $('.showmore a span').css("background","url(img/down.gif) no-repeat 0 0")
          .text("显示全部品牌");
    $('ul li').removeClass("promoted");
   }
   else{
    $category.show();   
    $('.showmore a span').css("background","url(img/up.gif) no-repeat 0 0")
         .text("精简显示品牌");
    $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");
   }
   return false;
  });
 }); 
</script>
</head>

<body>
<div class="subcategorybox">
 <ul>
  <li><a href="#">佳能</a><i>(30440)</i></li>
  <li><a href="#">索尼</a><i>(27220)</i></li>
  <li><a href="#">三星</a><i>(20808)</i></li>
  <li><a href="#">尼康</a><i>(17871)</i></li>
  <li><a href="#">松下</a><i>(12289)</i></li>
  <li><a href="#">卡西欧</a><i>(8242)</i></li>
  <li><a href="#">富士</a><i>(14891)</i></li>
  <li><a href="#">柯达</a><i>(9520)</i></li>
  <li><a href="#">宾得</a><i>(2195)</i></li>
  <li><a href="#">理光</a><i>(4114)</i></li>
  <li><a href="#">奥林巴斯</a><i>(12205)</i></li>
  <li><a href="#">明基</a><i>(1446)</i></li>
  <li><a href="#">爱国者</a><i>(3091)</i></li>
  <li><a href="#">其他品牌相机</a><i>(7275)</i></li>
 </ul>
 <div class="showmore">
  <a href="more.html"><span>显示全部品牌</span></a>
 </div>
</div>
</body>
</html>

posted @ 2009-06-30 16:21  aochen  阅读(119)  评论(0)    收藏  举报