jQuery的选项卡

下面请看代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <style>
  7. *{ margin:0; padding:0;}
  8. body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
  9. .tab { width:240px;margin:50px;}
  10. .tab_menu { clear:both;}
  11. .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
  12. .tab_menu li.hover { background:#DFDFDF;}
  13. .tab_menu li.selected { color:#FFF; background:#6D84B4;}
  14. .tab_box { clear:both; border:1px solid #898989; height:100px;}
  15. .hide{display:none}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="tab">
  20. <div class="tab_menu">
  21. <ul>
  22. <li class="selected">时事</li>
  23. <li>体育</li>
  24. <li>娱乐</li>
  25. </ul>
  26. </div>
  27. <div class="tab_box">
  28. <div>时事</div>
  29. <div class="hide">体育</div>
  30. <div class="hide">娱乐</div>
  31. </div>
  32. </div>
  34. <!-- 引入jQuery -->
  35. <script src="jquery.js" type="text/javascript"></script>
  36. <script type="text/javascript">
  37. $(function(){
  38. var $div_li =$("div.tab_menu ul li");
  39. $div_li.click(function(){
  40. $(this).addClass("selected") //当前<li>元素高亮
  41. .siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
  42. var index = $(this).index(); // 获取当前点击的<li>元素 在 全部li元素中的索引。
  43. $("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
  44. .eq(index).show() //显示 <li>元素对应的<div>元素
  45. .siblings().hide(); //隐藏其它几个同辈的<div>元素
  46. })
  47. })
  48. </script>
  49. </body>
  50. </html>

jQuery的选项卡的更多相关文章

  1. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  3. jquery制作选项卡

    思路:点击按钮后,先让所有的按钮的class属性都为“”,所有的div的display样式都为none:再让当前被点击按钮的class属性为active,以及所对应的div的display样式为blo ...

  4. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  5. 面向对象和面向过程的jquery版选项卡

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  6. Jquery tab 选项卡 无刷新切换

    转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...

  7. jQuery实例—选项卡（js源码和jQuery）【一些常见方法（1）-练习】

    分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  8. jquery之选项卡效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JQuery 网页选项卡制作

    网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库 选项卡原理 业务核心 完整小例子 引 ...

随机推荐

  1. 转载JAVA八大经典书籍，你看过几本？

    一.Java从入门到精通*<Java从入门到精通(第3版)>从初学者角度出发,通过通俗易懂的语言.丰富多彩的实例,详细介绍了使用Java语言进行程序开发需要掌握的知识.<Java从入 ...

  2. 黑马MySQL数据库学习day04 MySQL变量 存储过程 用户和授权管理

    /* MySQL中的变量局部变量,用户变量,会话变量和全局变量. 用户变量不用定义,直接使用. 1.用户变量赋值 set @xxx = 值; 2.查询 select @xxx; 语法帮助: 过程保存在 ...

  3. PXE刷机，存储节点失败

    最近刚刚帮客户对一台满配的X6-2刷机初始化,尝试了下PXE方式,但刷完机后,发现计算节点的imagehistory输出的状态都是成功的,而所有的存储节点状态都为failure,具体如下: [root ...

  4. Functions that return a function

    javascript学习中,经常会遇到闭包的问题,然后闭包的很多例子中又会遇到很多返回函数的闭包的例子程序.因为对闭包的理解还不够透彻,然后对于Functions rerurn a function产 ...

  5. 学习C/C++需要掌握哪些知识

    初级阶段 1.C语言 数据类型.变量.内存布局.指针基础: 字符串.一维数组.二维数组: 一级指针,二级指针,三级指针,N级指针概念,指针数组和数组指针: 结构体.文件的使用: 动态库的封装和设计: ...

  6. gym 101889I Imperial roads 最小生成树+LCA

    题目传送门 题意: 给出一幅无向带权图,q次询问,每次询问都求一棵包含给出的边的最小生成树. 思路: 首先求出最小生成树(kruskal),如果查询的边在最小生成树上,肯定是直接输出最小生成树,如果不 ...

  7. Codeforces - 722C 区间合并

    要求断裂的数列之和的最大值,只需在断裂处的下标修改为一个足够负无穷大的值就可以用线段树维护 这道题数据还是弱了点,如果n和ai均取最大可能我这个程序早就爆ll了(4e4的时候炸了),毕竟本来想着用GC ...

  8. delphi 与 java 兼容的 MD5

    function GetMd5(AValue : string) : string; var md5 : TIdHashMessageDigest5; bytes,byte1 : TBytes; be ...

  9. 正确理解ThreadLocal：ThreadLocal中的值并不一定是完全隔离的

    首先再讨论题主的这个观点之前我们要明确一下ThreadLocal的用途是什么? ThreadLocal并不是用来解决共享对象的多线程访问问题. 看了许多有关ThreadLocal的博客,看完之后会给人 ...

  10. grunt 合并压缩js和css文件（二）

    具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...