显示全部标签和部分标签

yaohuiye

浏览: 29204 次
性别:
来自: 厦门

最近访客更多访客>>

booker2688

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-10 ( 11)
2012-09 ( 15)
2012-06 ( 12)
更多存档...

博客分类：

暑假的笔记整理

jquery 显示全部标签部分

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

分享到：

无法直接启动带有“ 类库输出类型 ”的项 ... | firefox,IE浏览器的居中

2012-09-10 12:47
浏览 642
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

显示全部标签和部分标签

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

显示全部标签和部分标签

评论

发表评论

相关推荐

设置session

显式隐式转换

三种命名规则

c#中的索引器

看css禅意花园记的笔记

firefox,IE浏览器的居中

最近访客更多访客>>