效果图：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <style type="text/css">

        *{margin:0;padding:0}

        body{font-family:"微软雅黑","microsoft yahei",verdana,lucida,arial,sans-serif,"黑体";}

        .tab{padding:10px;}

        .tab .hd{list-style:none;overflow:auto;}

        .tab .hd li{float:left;cursor:pointer;padding:5px 20px 5px 20px;border:1px solid #4888B8;margin-left:-1px}

        .tab .hd li:first-child{border-radius:4px 0 0 0px;margin-left:0px;}

        .tab .hd li:last-child{border-radius:0 4px 0px 0;}

        .tab .hd .active{background:#4888B8;color:#fff}

        .tab .bd{list-style:none;margin-top:-1px}

        .tab .bd li{border:1px solid #4888B8;height:80px;width:50%;}

        #divTab2 .on{background:#4f714e;color:#fff}

    </style>

    <script>

        $(function () {

            //默认: {event: "click", active: ".active" }

            $("#divTab").tabs();

            $("#divTab2").tabs({ event: "mouseenter", active: ".on" });

        });

        (function ($) {

            $.fn.tabs = function (options) {

                $.fn.tabs.defaults = { event: "click", active: ".active" };

                return this.each(function () {

                    var opts = $.extend({}, $.fn.tabs.defaults, options || {});

                    var actClsName = opts.active.substring(1);

                    var tabNav = $(this);

                    var tabCon = tabNav.next();

                    var actIndex = tabNav.children(opts.active).index();

                    actIndex = actIndex == -1 ? 0 : actIndex;

                    tabNav.children().eq(actIndex).addClass(actClsName);

                    tabCon.children().eq(actIndex).siblings().hide();

                    tabNav.children().on(opts.event, function () {

                        $(this).siblings().removeClass(actClsName);

                        $(this).addClass(actClsName);

                        tabCon.children(":visible").hide();

                        tabCon.children(":eq(" + $(this).index() + ")").show();

                    });

                });

            };

        })(jQuery);

    </script>

</head>

<body>

    <div class="tab">

        <ul id="divTab" class="hd">

            <li>中国</li>

            <li>民营企业</li>

            <li>联想夺第一</li>

        </ul>

        <ul class="bd">

            <li>2016中国民营企业500强发布会在北京召开</li>

            <li>中国民营企业500强发布，华为超联想夺第一</li>

            <li>运通集团创立于20世纪80年代，成立于黑龙江哈尔滨市，20余年来运通致力于汽车行业的发展</li>

        </ul>

    </div>

    <div class="tab">

        <ul id="divTab2" class="hd">

            <li>中国</li>

            <li>民营企业</li>

            <li>联想夺第一</li>

        </ul>

        <ul class="bd">

            <li>2016中国民营企业500强发布会在北京召开</li>

            <li>中国民营企业500强发布，华为超联想夺第一</li>

            <li>运通集团创立于20世纪80年代，成立于黑龙江哈尔滨市，20余年来运通致力于汽车行业的发展</li>

        </ul>

    </div>

</body>

</html>

jQuery选项卡插件、Tabs插件的更多相关文章

  1. jQuery选项卡插件

    html结构 <ul id="tabs" class="tabs"> <li data-tab="users">Us ...

  2. jQuery插件 -- UI插件Tabs Widget 1.10

    最近将tabs(标签页)整合到Admin LTE( 一个完全响应式管理模板,基于Bootstrap3的框架.)中使用.过程中走了不少弯路,原因是没有注意版本问题,jquery ui tabs 每次升级 ...

  3. jQuery EasyUI 选项卡面板tabs使用实例精讲

    1. 对选项卡面板区域 div 设置 class=”easyui-tabs” 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) 3. 设置面板 fi ...

  4. jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  5. 【jQuery】结合accordion插件分析写插件的方法及注意事项

    1.jQuery插件的命名方式:jquery.[插件名].js 2.对象方法附加在jQuery.fn上,全局函数附加在jQuery对象本身上 3.插件内部this指向的是通过选择器获取的jQuery对 ...

  6. 16款最佳的 jQuery Time Picker 时间选择插件

    jQuery 插件可以为你做许多事情,你可以很容易地把这些插件集成到您的网站.网络上的 jQuery 日期选择器和日历插件很多,但找不到很满意的时间选择器插件. 在这里,我们收集了最好的一组 jQue ...

  7. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  8. jQuery文件上传插件Uploadify（转）

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  9. ystep jQuery流程、步骤插件

    今天小菜给大家带来又一款给力jQuery插件:ystep. 从名称上大致可以看出,这是一个流程步骤插件. 如果无意外的话,这可能是小菜近期最后一个作品了...苦逼的小菜即将创业,可能就没时间折腾啦~好 ...

  10. jQuery打造智能提示插件二（可编辑下拉框）

    在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...

随机推荐

  1. java线程中的wait和notify以及notifyall

    一.区别与联系 1.1.wait(),notify()和notifyAll()都是java.lang.Object的方法,而确实sleep方法是Thread类中的方法,这是为什么呢?  因为wait和 ...

  2. Could not allocate CursorWindow size due to error -12 错误解决方法

    04-29 11:13:54.284 13584-13584/com.uniubi.smartfrontdesk E/art: Throwing OutOfMemoryError "pthr ...

  3. JavaEE通过response实现请求重定向

    请求重定向指的是一个web资源收到客户端请求后,通知客户端去访问另外一个web资源,这称之为请求重定向.302状态码和location头即可实现重定向. 请求重定向最常见的应用场景就是用户登录. 下面 ...

  4. PostgreSQL的 initdb 源代码分析之十六

    继续分析 setup_description(); 展开后: 就是要把 share/postgres.description 文件的内容读入到 pg_description 和 pg_shdescri ...

  5. 窗体 dialog 弹出时动画效果

    1.先创建 anim中的 xml  动画文件 <?xml version="1.0" encoding="utf-8"? >   <set x ...

  6. NAT的全然分析及其UDP穿透的全然解决方式

    NAT的全然分析及其UDP穿透的全然解决方式   一:基本术语 防火墙 防火墙限制了私网与公网的通信,它主要是将(防火墙)觉得未经授权的的包丢弃,防火墙仅仅是检验包的数据,并不改动数据包中的IP地址和 ...

  7. POJ1463：Strategic game(树形DP)

    Description Bob enjoys playing computer games, especially strategic games, but sometimes he cannot f ...

  8. delphi 为应用程序添加提示

    type  TForm1 = class(TForm)    Button1: TButton;    Panel1: TPanel;    Edit1: TEdit;    procedure Fo ...

  9. TreeView节点拖拉操作1

      TreeView节点拖拉操作1 //事先设置 TreeView1.DragMode= dmAutomatic;   unit Unit1; interface uses   Windows, Me ...

  10. Android之Handler探索

    Handler背景理解: Handler被最多的使用在了更新UI线程中,但是,这个方法具体是什么样的呢?我在这篇博文中先领着大家认识一下什么是handler以及它是怎么样使用在程序中,起着什么样的作用 ...