<!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. 使用Java操作Redis（二）

    上篇文章中我们可以看到,通过自己动手编码来操作Redis是相当繁琐的,实际上我们在重复制造轮子.Redis网站上列举出了一些方便操作Redis的常用工具. 可供Java选择的比较多,这里介绍一下Jed ...

  2. $.widget 编写jQueryUI插件(widget)

    转自:MainTao: 编写jQueryUI插件(widget) 使用jQueryUI的widget来写插件,相比于基本的jquery插件有一些好处: * 方便实现继承,代码重用 * 默认是单例 * ...

  3. BZOJ5017 炸弹（线段树优化建图+Tarjan+拓扑）

    Description 在一条直线上有 N 个炸弹,每个炸弹的坐标是 Xi,爆炸半径是 Ri,当一个炸弹爆炸时,如果另一个炸弹所在位置 Xj 满足:  Xi−Ri≤Xj≤Xi+Ri,那么,该炸弹也会被 ...

  4. Bash 基础特性

    命令别名  alias 显示当前shell中定义的所有别名  alias 别名='原始命令'  unalias 别名 取消定义的别名在命令前加\使用命令本身,而不是别名(或者使用绝对路径执行命令使用命 ...

  5. svn 学习

    svn命令在linux下的使用 svn命令在linux下的使用SVN软件版本管理 1.将文件checkout到本地目录svn checkout path(path是服务器上的目录)例如:svn che ...

  6. Android开发之Menu：OptionMenu(选项菜单)、ContextMenu(上下文菜单)、SubMenu(子菜单)

    菜单的概念,现在已经很普及了.Windows系统.Mac.桌面版Linux.Java Swing等,都有可视化菜单.一.Android平台3种菜单  选项菜单(OptionMenu).上下文菜单(Co ...

  7. FastDFS学习总结(1)--FastDFS安装和部署

    FastDFS是一个开源的,高性能的的分布式文件系统,他主要的功能包括:文件存储,同步和访问,设计基于高可用和负载均衡,FastDFS非常适用于基于文件服务的站点,例如图片分享和视频分享网站 Fast ...

  8. 最全Pycharm教程（10）——Pycharm调试器总篇

    最全Pycharm教程(1)--定制外观 最全Pycharm教程(2)--代码风格 最全Pycharm教程(3)--代码的调试.执行 最全Pycharm教程(4)--有关Python解释器的相关配置 ...

  9. SQL Search

    Press TAB to expand wildcard tab键之后,会自动展开,直接枚举表中所有的字段 根据名字查找存储过程,发现找不到 原因是,本地是一个备份库.服务器上通过sql source ...

  10. RedHat Linux 多媒体学习指南 (共 36 部原创视频)

    1.为sco unix 添加第二块网卡 [url]http://you.video.sina.com.cn/b/11695632-1443650204.html[/url]   2.为sco unix ...