<!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. P1452 Beauty Contes

    题目背景 此处省略1W字^ ^ 题目描述 贝茜在牛的选美比赛中赢得了冠军”牛世界小姐”.因此,贝西会参观N(2 < = N < = 50000)个农场来传播善意.世界将被表示成一个二维平面 ...

  2. 关于element-ui框架里面table组件的使用

    1.表格的数据放哪里:后台返回的列表数据放到:data后面. 2.每一个列怎么显示数据:返回的列表里面的属性想要在列显示出来,将对应的字段名写到prop后面就行. 3.列表上面想显示序号:{{scop ...

  3. PHP7内核剖析之执行流程

    以fpm为例: 1.fpm启动时,会先执行 module_startup, 并随着fpm进程常驻 2.当一个请求到达之后,会执行 request_startup, 进行一些请求初始化工作,然后执行代码 ...

  4. yes---重复输出指定的字符串

    yes命令在命令行中输出指定的字符串,直到yes进程被杀死.不带任何参数输入yes命令默认的字符串就是y. 语法 yes(参数) 参数 字符串:指定要重复打印的字符串. 实例 [root@localh ...

  5. Java基础学习总结（14）——Java对象的序列化和反序列化

    一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存 ...

  6. Java面向切面原理与实践

    Java面向切面原理与实践 一. 面向切面编程是什么 首先用一句话概括:面向切面编程(AOP)就是对某些具有相似点的代码进行增强. 相似点可以是同一个包.使用相同的注解.public的方法.以Impl ...

  7. DF标志和串移动指令(movsb/movsw)

    1.标志寄存器的第10位DF,方向标志位.在串处理指令中,控制每次操作后si,di的增减 DF=0,每次操作后,si.di添加 DF=1,每次操作后,si.di减小 我们能够用汇编语法描写叙述movs ...

  8. scikit-learn的线性回归

    scikit-learn的线性回归预测Google股票 这是机器学习系列的第一篇文章. 本文将使用Python及scikit-learn的线性回归预测Google的股票走势.请千万别期望这个示例能够让 ...

  9. 如何保证对象线程内唯一：数据槽（CallContext）

    CallContext 是类似于方法调用的线程本地存储区的专用集合对象,并提供对每个逻辑执行线程都唯一的数据槽.数据槽不在其他逻辑线程上的调用上下文之间共享.当 CallContext 沿执行代码路径 ...

  10. mybatis：开发环境搭建--增删改查--多表联合查询（多对一）

    什么是mybatisMyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis使用简单的XML或 ...