Chinaunix首页 | 论坛 | 博客

stray82的ChinaUnix博客stray.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

stray82

  • 博客访问： 336354
  • 博文数量： 206
  • 博客积分： 1040
  • 博客等级： 少尉
  • 技术积分： 1756
  • 用 户 组： 普通用户
  • 注册时间： 2012-04-09 17:22
文章分类

全部博文（206）

文章存档

2015年（3）

2014年（147）

2013年（2）

2012年（54）

我的朋友
最近访客
推荐博文
jquery选项卡

分类： jQuery

2014-02-10 14:17:35


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title></title>
  6. <link href="css/style.css" rel="stylesheet" type="text/css" />

  8. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  9. <script type="text/javascript" >
  10. //<![CDATA[
  11.     $(function(){
  12.      var $div_li =$("div.tab_menu ul li");
  13.      $div_li.click(function(){
  14.             $(this).addClass("selected") //当前<li>元素高亮
  15.                  .siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
  16.             var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
  17.             $("div.tab_box > div")     //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
  18.                     .eq(index).show() //显示 <li>元素对应的<div>元素
  19.                     .siblings().hide(); //隐藏其它几个同辈的<div>元素
  20.         }).hover(function(){
  21.             $(this).addClass("hover");
  22.         },function(){
  23.             $(this).removeClass("hover");
  24.         })
  25.     })
  26. //]]>
  27. </script>
  28. </head>
  29. <body>

  31. <div class="tab">
  32.     <div class="tab_menu">
  33.         <ul>
  34.             <li class="selected">时事</li>
  35.             <li>体育</li>
  36.             <li>娱乐</li>
  37.         </ul>
  38.     </div>
  39.     <div class="tab_box">
  40.          <div>时事</div>
  41.          <div class="hide">体育</div>
  42.          <div class="hide">娱乐</div>
  43.     </div>
  44. </div>

  46. </body>
  47. </html>

阅读(534) | 评论(0) | 转发(0) |
0

上一篇：jquery表单验证

下一篇：jquery单行滚动

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6