<!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. PostgreSQL源代码中插件的使用

    如果编译数据库时使用了gmake world和gmake install-world, 所有的插件都会被安装, 那么就不需要再次安装了. 插件目录 contrib 进入要安装的插件目录, 例如 cd ...

  2. POJ 2251 Dungeon Master【BFS】

    题意:给出一个三维坐标的牢,给出起点st,给出终点en,问能够在多少秒内逃出. 学习的第一题三维的广搜@_@ 过程和二维的一样,只是搜索方向可以有6个方向(x,y,z的正半轴,负半轴) 另外这一题的输 ...

  3. Spring：dispatchservlet

    DispatcherServlet 是 Spring MVC 中负责请求调度的核心引擎,所有的请求将由此 Servlet 根据配置分发至各个逻辑处理单元.其内部同时也维护了一个ApplicationC ...

  4. node使用express命令报错找不到ejs的解决方法

    首先确定已经全局安装过好几遍express和express-generator,但一使用express命令直接报找不到ejs模块,全局和本地安装ejs都没用,nodemon模块报同样错误,找不到deb ...

  5. 通过浏览器地址进行 post get 请求

    首先安装curl 1.post chcp 65001 title 接口测试脚本 d: cd D:\curl\ curl -l -X POST -d "params" url ech ...

  6. 学习参考《高性能MySQL(第3版)》中文PDF+英文PDF

    学习mysql数据库时推荐看看mysql 领域的经典之作<高性能mysql(第3版)>,共分为16 章和6 个附录,内容涵盖mysql 架构和历史,基准测试和性能剖析,数据库软硬件性能优化 ...

  7. UVALive 5790 Ball Stacking DP

    DP的方向真的很重要,这题做的时候死活想不出来,看了题解以后恍然大悟原来这么简单. 题意: 有n层堆成金字塔状的球,若你要选一个球,你必须把它上面那两个球取了,当然也可以一个不取.求选的球最大的权值和 ...

  8. 【Educational Codeforces Round 37 B】 Tea Queue

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用一个队列来模拟排队就好. 队列放三元组(x,y,z) x表示人的下标,y和z分别表示进入和退出时间. 然后枚举时间从1到5000 ...

  9. ti-sdk-evm-am335x-05.07 uboot分析(MLO跳转到u-boot之前)

    --------------------------------------------------------------------------------                     ...

  10. 字符串匹配：KMP

    參考:从头到尾彻底理解KMP 在字符串 str 中 匹配模式串 pattern 1. 计算模式串的 next 数组: 2. 在字符串中匹配模式串:当一个字符匹配时,str[i++], pattern[ ...