效果图：

<!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. C# winform 最小化到电脑右下角

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  2. 利用AssetsManager实现在线更新脚本文件lua、js、图片等资源（免去平台审核周期）

    转自:http://www.himigame.com/iphone-cocos2dx/1354.html 首先说明一个问题: 为什么要在线更新资源和脚本文件!? 对于此问题,那要说的太多了,简单概括, ...

  3. UVa784 Maze Exploration

    // 题意:输入一个迷宫,从*开始遍历,把可达点标记为字符# 注意迷宫边界不规则,要用strlen判断. #include<cstdio> #include<cstring> ...

  4. 【转】Watir, Selenium & WebDriver

    转自:http://watirmelon.com/2010/04/10/watir-selenium-webdriver/ Please also see my new ‘Watir-WebDrive ...

  5. C#中如何计算时间差?

    C#中怎么计算两时间相差多少.计算2个时间之间的差,可以计算到时分秒! <1> label1.Text = "2004-1-1 15:36:05"; label2.Te ...

  6. [AngularJS] $http cache

    By default your HTTP requests with the $https service in Angular are not cached. By setting some opt ...

  7. Android Configuration change属性

    问题:横竖屏切换时Activity的生命周期? 答案: 1.不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次 2 ...

  8. ABAP FIELD-SYMBOLS 有大作用- 将没有可改参数的增强出口变得也能改主程序的值了

    看下图代码: report  z_xul_test2 中 定义了 全局变量 G_DATA1 , 分别调用了 z_xul_tes1 中的 form  和 function zbapi_test , 这两 ...

  9. 微信朋友圈分享页面（JS-SDK 1.0）

    微信更新sdk后大量分享朋友圈代码失效,标题 缩略图 描述无法自定义 新版SDK分享文章步骤 1.绑定域名 (方法参考 http://mp.weixin.qq.com/wiki/7/aaa137b55 ...

  10. php的引用&（就是在变量或者函数、对象等前面加上&符号）

    官方文档: 1.引用是什么:http://www.php.net/manual/zh/language.references.whatare.php 2.引用做什么:http://www.php.ne ...