1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             .tabulous_active{
  8.                 border: 1px solid blue;
  9.             }
  10.         </style>
  11.         <script src="js/jquery.js"></script>
  12.     </head>
  13.     <body>
  14.     <div id="meeting_tabs">
  15.         <ul>
  16.               <li class="tabulous_active"><a href="#" title="">全部</a></li>
  17.               <li><a href="#" title="">未开始</a></li>
  18.               <li><a href="#" title="">已结束</a></li>
  19.                <li><a href="#" title="">进行中</a></li>
  20.         </ul>
  21.            <div id="tabs_container">
  22.             <div  class="pane">1</div>
  23.             <div  class="pane">2</div>
  24.             <div  class="pane">3</div>
  25.             <div  class="pane">4</div>
  26.           </div>
  27.     </div>
  28.  
  29.     <script>
  30.         $('#meeting_tabs>ul li').click(function(){
  31.             $(this).addClass('tabulous_active').siblings().removeClass('tabulous_active');
  32.             var num = $(this).index();
  33.             if(num == 0){
  34.                 $('#tabs_container .pane').show();
  35.             }else{
  36.                 $('#tabs_container .pane').eq(num).show().siblings().hide();
  37.             }
  38.          });
  39.     </script>
  40.     </body>
  41. </html>

jQuery简单tab按钮切换的更多相关文章

  1. jQuery|简单tab栏切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  3. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  4. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  5. jQuery实现tab标签切换效果

    技巧一.jQuery :eq() 选择器 定义和用法 :eq() 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 经常与其 ...

  6. jQuery图片tab栏切换

    <script> $(function(){ $('.tab li').mouseenter(function(){ var $this=$(this); var index=$this. ...

  7. 不用jquery实现tab页切换，刷新，后退，前进状态自动维护 很好用

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

  8. jquery 简单的栏目切换

    <style> ul{ list-style:none; padding:0px; margin:0px;} #nav_box{ width:502px; height:402px; ov ...

  9. jQuery----jquery实现Tab键切换

    使用Jquery实现tab键切换,代码简洁易懂,实现逻辑清晰明了.具体总结如下: 需求分析: 鼠标进入tab切换模块,鼠标当前的模块上边框变为红色,并显示对应的商品名称.鼠标离开后,上边框恢复原色,图 ...

随机推荐

  1. AngularJs轻松入门（一）创建第一个应用

    AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web ...

  2. 第一性原理：First principle thinking是什么？

    作者:沧海桑田链接:https://www.zhihu.com/question/40550274/answer/225236964来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  3. NodeJS学习笔记 进阶 (11)Nodejs 进阶：调试日志打印：debug模块

    个人总结:读完这篇文章需要5分钟,讲解了debug模块的使用 摘选自网络 前言 在node程序开发中时,经常需要打印调试日志.用的比较多的是debug模块,比如express框架中就用到了.下文简单举 ...

  4. BZOJ 2141 排队（分块+树状数组）

    题意 第一行为一个正整数n,表示小朋友的数量:第二行包含n个由空格分隔的正整数h1,h2,…,hn,依次表示初始队列中小朋友的身高:第三行为一个正整数m,表示交换操作的次数:以下m行每行包含两个正整数 ...

  5. linux6 安装oracle11g

    转自:http://blog.csdn.net/nhm_lxy/article/details/37813789 安装环境:    虚拟机VMware Workstation 10.0 操作系统:   ...

  6. 二 HTable 源码导读

    户端调优的方法里面无非就这么几种:1)关闭autoFlush2)关闭WAL日志3)把writeBufferSize设大一点,一般说是设置成5MB        经过实践,就第二条关闭日志的效果比较明显 ...

  7. Vs2012在Linux开发中的应用（1）：开发环境

    在Linux的开发过程中使用过多个IDE.code::blocks.eclipse.source insight.还有嵌入式厂商提供的各种IDE.如VisualDsp等,感觉总是不如vs强大好用.尽管 ...

  8. POJ2369 Permutations【置换群】

    题目链接: http://poj.org/problem?id=2369 题目大意: 给定一个序列.问最少须要多少次置换才干变为 1.2.-.N 的有序序列.比方说给 定5个数的序列 4 1 5 2 ...

  9. 【POJ3377】Ferry Lanes 最短路

    我仅仅是贴一下手写堆优化的dij模板.尽管.它.TLE了--**** #include <cstdio> #include <cstring> #include <ios ...

  10. Effective C++ 条款13

    以对象管理资源 资源的种类非常多,动态分配的内存.文件描写叙述器.相互排斥锁.图像界面中画刷.数据库连接.网络socket等. 资源通常是有限的.当你不用时,必须释放.不然就会造成资源浪费.更严重的情 ...