<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .tabulous_active{

                border: 1px solid blue;

            }

        </style>

        <script src="js/jquery.js"></script>

    </head>

    <body>

    <div id="meeting_tabs">

        <ul>

              <li class="tabulous_active"><a href="#" title="">全部</a></li>

              <li><a href="#" title="">未开始</a></li>

              <li><a href="#" title="">已结束</a></li>

               <li><a href="#" title="">进行中</a></li>

        </ul>

           <div id="tabs_container">

            <div  class="pane">1</div>

            <div  class="pane">2</div>

            <div  class="pane">3</div>

            <div  class="pane">4</div>

          </div>

    </div>

    <script>

        $('#meeting_tabs>ul li').click(function(){

            $(this).addClass('tabulous_active').siblings().removeClass('tabulous_active');

            var num = $(this).index();

            if(num == 0){

                $('#tabs_container .pane').show();

            }else{

                $('#tabs_container .pane').eq(num).show().siblings().hide();

            }

         });

    </script>

    </body>

</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. [USACO08DEC]拍头Patting Heads 水题

    类似素数筛,暴力可过,不需要太多的优化 Code: #include<cstdio> #include<algorithm> #include<string> us ...

  2. NodeJS学习笔记 (29)二进制解码-string_decoder(ok)

    原文:https://github.com/chyingp/nodejs-learning-guide 自己过一遍: 模块简介 string_decoder模块用于将Buffer转成对应的字符串.使用 ...

  3. SPFA的小优化

    标签:闲扯 SPFA的小优化 1. 向队尾加入元素时,如果它比对首还优,就把把它直接和队首交换. 拿一个双端队列来实现 (手写 , head ,tail   STLdeque亲测及其慢) 这个小优化其 ...

  4. ArchLinux 设置时间同步和硬件时间同步错误 No usable clock interface found

    笔记本不知道怎么了,总是时间对不上 硬件时间也设置不了,只能时间同步了 手动时间同步 ntpdate即可,ntp服务器在这里用这两个就好了 cn.ntp.org.cn 或 edu.ntp.org.cn ...

  5. ConEmu windows上的终端工具

    ConEmu Windows terminal   官网: http://conemu.github.io/        

  6. Shell应用之网卡流量监测

    需求分析 1)按固定时间监测一次网卡流量 2)当网卡流量为0时重启网卡 一.网卡流量查询 sar(System ActivityReporter系统活动情况报告)是目前Linux上最为全面的系统性能分 ...

  7. 使用PXE+NFS EFI引导安装RHEL6/7以及Kickstart安装

    PXE引导的步骤: 1.开机后选择网络启动,client端向server端的dhcpd发起获取IP地址的dhcp请求. 2.server端分配IP后,dhcpd会同时根据其配置文件,通过TFTP协议发 ...

  8. whoami---打印当前有效的用户名称

    whoami命令用于打印当前有效的用户名称,相当于执行id -un命令. 语法 whoami(选项) 选项 --help:在线帮助: --version:显示版本信息. 实例 [root@localh ...

  9. python 进阶：修饰器的介绍

    参考链接:Python 函数装饰器 我认为python中的装饰器是一个很厉害的功能,他能瞬间提升代码的逼格,但对于我这样的小白来说,别说为所欲为的使用了,就连简单的尝试一下,却也是难于登天.经过长达半 ...

  10. 【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...