<!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. 二、Fast-R-CNN

    一.概括 Fast R-cnn的主要亮点有:Fast R-CNN将借助多任务损失函数,将物体识别和位置修正合成到一个网络中,不再对网络进行分步训练,不需要大量内存来存储训练过程中特征的数据:用RoI层 ...

  2. Kubernetes1.5 集成dashboard

    Kubernetes1.5 集成dashboard 配置kubernetes的dashboard相对简单.同样的,只需要从源码中获取到dashboard-controller.yaml及dashboa ...

  3. Git 内部原理 - (5)引用规格 (6) 传输协议

    引用规格 纵观全书,我们已经使用过一些诸如远程分支到本地引用的简单映射方式,但这种映射可以更复杂. 假设你添加了这样一个远程版本库: $ git remote add origin https://g ...

  4. Python实现快排

    Python实现快排 def quicksort(arr): if len(arr) <= 1: return arr pivot = arr[len(arr) // 2] left = [x ...

  5. Zookeeper入门-Java版本HelloWorld例子

    上一篇介绍了,Zookeeper的基本概念,怎么启动,怎么解决可能遇到的几个问题.本篇,根据网上代码,整理了一个例子,Zookeeper的HelloWorld. 下面这个代码,还是比较简单的,核心类就 ...

  6. 08-for循环

  7. 【转】 我的java web登录RSA加密

    [转] 我的java web登录RSA加密 之前一直没关注过web应用登录密码加密的问题,这两天用appscan扫描应用,最严重的问题就是这个了,提示我明文发送密码.这个的确很不安全,以前也大概想过, ...

  8. 洛谷 P3467 [POI2008]PLA-Postering

    P3467 [POI2008]PLA-Postering 题目描述 All the buildings in the east district of Byteburg were built in a ...

  9. Thinking in UML 学习笔记（三）——UML核心视图之类图

    类图的作用:用于展示系统中的类及其相互之间的关系. UML在解决面向对象的方法中对类理解为三个层次,各自是:概念层.说明层.实现层.在UML中,从開始的需求到终于设计类,类图也是环绕这三个层次的观点进 ...

  10. hdoj2066一个人的旅行

    Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submission ...