登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学无止境

一点积累,与大家分享

 
 
 

日志

 
 

Filtering data with jQuery  

2010-03-31 09:38:09|  分类: js技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
from:http://tutsvalley.com/demos/filtering/styled.html
<!DOCTYPE html>

<html lang="en">
<head>
<title>jQuery filtering</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#filters a').click(function(e){

e.preventDefault();

var filter = $(this).attr('id');

$('#content ul li').show().addClass('visible');
$('#content ul li:not(.' + filter + ')').hide().removeClass('visible');



});
$('#content ul li').hover(function(){
$(this).addClass('li_hover');
},function(){
$(this).removeClass('li_hover');
});
});

</script>
<style>
body{width:500px;font-family:'tahoma'; text-align:center; margin:auto; background:black;}
h2{ color:white; }
#content{
text-align:left;
border:1px solid gray;
border-top:none;
background: white;
}
#content ul { list-style-type:none; margin:0px; padding:0px;}
#content ul li { margin:0px; padding:5px; font-size:14px;}
#filters{
padding:5px;
border:1px solid gray;
background:#3C7293;
color:white;
}
#filters a{
text-decoration:none;
outline:none;
font-size:17px;
color:white;
}
#filters a:hover{
text-decoration:underline;
}
#filters a:focus{
text-decoration:underline;
}
.li_hover{
background-color:#FFC0C0;
cursor:pointer;
cursor:hand;
}
.clear{ clear:both; }

</style>
</head>
<body>
<h2>Filtering data with jQuery</h2>
<div id='filters'>
    <a href='#'>All</a> | <a href='#' id='bestof'>Best Of</a> | <a href='#' id='jquery'>jQuery</a> | <a href='#' id='php'>PHP</a> | <a href='' id='html'>HTML</a> | <a href='#' id='css'>CSS</a>
    <div class='clear'></div>
</div>

<div id='content'>
<ul>
<li class='bestof'>Best of September- 10 web development articles and tutorials</li>
<li class='jquery php'>14 jQuery and non-jQuery Rich Text Editors</li>
<li class='php'>How to know where your visitors are coming from</li>
            <li class='php'>How speed improving using single quotes instead of double quotes really is</li>
<li class='jquery html'>Automatic input field focus on page load</li>
<li class='jquery php'>Checking username availability with ajax using jQuery</li>
<li class='jquery css html'>Hover effect with jQuery and CSS</li>
<li class='jquery css html'>Zebra stripes with jQuery and CSS</li>
<li class='jquery html'>Maxlength for textarea using jQuery</li>
        </ul>
</div>
</body>
</html>
  评论这张
 
阅读(557)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018