效果图：

<!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. 利用微软Speech SDK 5.1开发语音识别系统主要步骤

    利用微软Speech SDK 5.1开发语音识别系统主要步骤 2009-09-17 10:21:09|  分类: 知识点滴|字号 订阅 微软语音识别分两种模式:文本识别模式和命令识别模式.此两种模式的 ...

  2. CloudStack 使用生态统计

    http://shapeblue.com/

  3. iOS开发-轻点、触摸和手势

    一.响应者链 以UIResponder作为超类的任何类都是响应者.UIView和UIControl是UIReponder的子类,因此所有视图和所有控件都是响应者. 初始相应器事件首先会传递给UIApp ...

  4. 关于GridBagLayout的讲解哦

    13-08-29 17:01:10|  分类: Java |  标签:gridbaglayout  gridbagconstraints  添加方法  |字号 订阅     GridBagLayout ...

  5. IOS Note - Outlet(插座) & Action(动作)

    OutletActionViewController.h #import <UIKit/UIKit.h> @interface OutletActionViewController : U ...

  6. C#程序实现动态调用DLL的研究[转]

    摘   要: 在< csdn 开发高手> 2004 年第 03 期中的<化功大法——将 DLL 嵌入 EXE >一文,介绍了如何把一个动态链接库作为一个资源嵌入到可执行文件,在 ...

  7. 通过缓存数据库结果提高PHP性能(转)

    众所周知,缓存数据库查询的结果可以显著缩短脚本执行时间,并最大限度地减少数据库服务器上的负载.如果要处理的数据基本上是静态的,则该技术将非常有效.这是因为对远程数据库的许多数据请求最终可以从本地缓存得 ...

  8. Spring MVC 接收Json格式参数

    今天做了一个关于表格排序的功能,可以通过右边的箭头做排序操作,每次操作需要通过Ajax将每条记录的Id数组作为参数去发送请求, 后台Spring MVC接到参数后作更改序号操作. 前端页面发送请求的代 ...

  9. 交换a、b

    有两个变量a和b,不使用任何中间变量交换a和b. 方法一: 采用如下方法: a=a+b; b=a-b; a=a-b; 这样做的缺点就是如果a.b都是比较大的数,则a=a+b时就会越界. 而采用: a= ...

  10. 【ZZ】C 语言中的指针和内存泄漏 & 编写高效的C程序与C代码优化

    C 语言中的指针和内存泄漏 http://www.ibm.com/developerworks/cn/aix/library/au-toughgame/ 本文讨论了几种在使用动态内存分配时可以避免的陷 ...