效果图：

<!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. GUI图形界面

    一.界面元素 1.首层容器:Jwindow.JFrane(窗体).JDialge(对话框).JApplet. 2.组件:标签.文本框.密码框.按钮.下拉列表.单选框.复选框.文本域等 注:标签JLab ...

  2. C#客户端链接网页需要用到的WebClient

    WebClient 类提供向 URI 标识的任何本地.Intranet 或 Internet 资源发送数据以及从这些资源接收数据的公共方法. WebClient 类使用 WebRequest 类提供对 ...

  3. Arduino 4X3键盘 AD模拟分量实现

    //读分量测试 ---------------- ; //模拟口0 ; // 取得键AD模拟分量 void setup() { //通信波特率 Serial.begin(); } void loop( ...

  4. MySQL安装详解(V5.5 For Windows)

    前言 这几年一直在用MySQL,并且是Windows+.Net+MySQL的搭配,用MyISAM引擎支持过单表每天千万以上的数据递增,TB级的数据MySQL游刃有余.最近在做一个较大并发的项目,尝试了 ...

  5. Swift计算属性

    除存储属性外,类.结构体和枚举可以定义计算属性,计算属性不直接存储值,而是提供一个 getter 来获取值,一个可选的 setter 来间接设置其他属性或变量的值. struct Point { va ...

  6. Nginx Rewrite 实现匹配泛域名规则

    Nginx 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru ...

  7. ie F12开发工具出不来

    IE的F12开发人员工具不显示问题: 按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的 ...

  8. Asp.Net 之 WebService部署到服务器后出现" The test form is only available for requests from the local machine "

    最近由于任务需要开发了一个WebService, 部署到服务器以后,出现上述问题,网上查找到如下解决方案: 问题原因: 从 NET Framework 1.1 起定义了一个名为 HttpPostLoc ...

  9. 结合源码看nginx-1.4.0之nginx事件驱动机制详解

    目录 0. 摘要 1. nginx事件模块组织结构 2. nginx事件模块数据结构及类图 3. nginx事件模块运行机制 4. 练习:一个简单的事件驱动模块 5. 小结 6. 参考源码

  10. Android（java）学习笔记93：Android布局详解之一：FrameLayout

    FrameLayout是最简单的布局了.所有放在布局里的控件,都按照层次堆叠在屏幕的左上角.后加进来的控件覆盖前面的控件. 在FrameLayout布局里,定义任何空间的位置相关的属性都毫无意义.控件 ...