用JQuery实现QQ的页面功能
2011-09-26 16:02
330 查看
<!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>
<title></title>
<script src="../jquery-1.6.3.js" type="text/javascript"></script>
<style type="text/css">
ul{list-style-type:none;width:100px;}
.hear{background-color:Blue;cursor:pointer;}
.body{border-color:Green;border-width:1px;border-style:;}
</style>
<script type="text/javascript">
$(function () {
$("#qq li:odd").addClass("body");
$("#qq li:even").addClass("hear").click(function () {
$(this).next("li.body").show("fast").siblings("li.body").hide("500");
});
$("#qq li:first").click();//模拟点击
});
</script>
</head>
<body>
<ul id="qq">
<li>我的好友</li>
<li>刘德华<br />周杰伦<br />周星星<br /></li>
<li>我的同学</li>
<li>萨达姆<br />拉登<br />奥巴马<br /></li>
<li>陌生人</li>
<li>郭台铭<br />李彦宏<br />马化腾<br /></li>
</ul>
</body>
</html>
在引用代码前记得引入Jquery的库,这个能实现QQtab的功能。有兴趣的兄弟姐妹们可以一起研究研究
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.6.3.js" type="text/javascript"></script>
<style type="text/css">
ul{list-style-type:none;width:100px;}
.hear{background-color:Blue;cursor:pointer;}
.body{border-color:Green;border-width:1px;border-style:;}
</style>
<script type="text/javascript">
$(function () {
$("#qq li:odd").addClass("body");
$("#qq li:even").addClass("hear").click(function () {
$(this).next("li.body").show("fast").siblings("li.body").hide("500");
});
$("#qq li:first").click();//模拟点击
});
</script>
</head>
<body>
<ul id="qq">
<li>我的好友</li>
<li>刘德华<br />周杰伦<br />周星星<br /></li>
<li>我的同学</li>
<li>萨达姆<br />拉登<br />奥巴马<br /></li>
<li>陌生人</li>
<li>郭台铭<br />李彦宏<br />马化腾<br /></li>
</ul>
</body>
</html>
在引用代码前记得引入Jquery的库,这个能实现QQtab的功能。有兴趣的兄弟姐妹们可以一起研究研究
相关文章推荐
- JQuery 简便实现页面元素数据验证功能
- 网页引导:jQuery插件实现的页面功能介绍引导页效果
- 常用小Demo:用js/jQuery实现回到页面顶部功能
- 基于jquery实现页面滚动到底自动加载数据的功能
- jQuery实现的页面遮罩层功能示例【测试可用】
- jquery 点击页面其他地方实现隐藏菜单功能
- JQuery实现类QQ面板动画功能
- jQuery的ajax中使用FormData实现页面无刷新上传功能
- jquery实现返回页面顶部功能。
- jquery实现页面置顶功能代码
- 利用JQuery实现注册页面的验证功能
- jQuery实现的页面详情展开收起功能示例
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- JavaScript实现离开页面前提示功能【附jQuery实现方法】
- 用html5页面引入了一个jquery插件,实现平板上的向上滑动加载更多的功能
- IOS 实现边滑动边缩放的类似qq主界面的页面切换功能
- 使用jquery.form.js 进行表单提交,通过回调函数实现页面互动功能。
- jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例