效果图：

<!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. 通过SCVMM分配SMB 3.0 文件共享

    1.创建SMB群集共享,赋予Hyper-V主机. Hyper-V群集名称.Hyper-V管理员.Hyper-V服务账户完全控制权限 2.VMM提供程序导入 文件服务器(运行方式账户要对文件服务器群集的 ...

  2. Unity的使用

    1.Ioc功能使用: 1.介绍对象的生命周期 顾名思义 在容器中存在的实例,是可以定义其生命周期的. Unity提供了 几种自带的 生命周期 管理类(常用的已标红) ContainerControll ...

  3. 使用GLSL实现更多数量的局部光照 【转】

    原文 http://www.cnblogs.com/CGDeveloper/archive/2008/07/02/1233816.html 众所周知,OpenGL固定管线只提供了最多8盏灯光.如何使得 ...

  4. 使用IOCTL代码实现LCD背光调节

    国内这种代码找不到.于是參考了相关代码后完好例如以下代码,且实现方式通过IOCTL代码实现LCD背光调节的功能. 适合场合为平板电脑或者笔记本.主要还是要靠BIOS支持与否. 编译环境使用:Dev-c ...

  5. ResolveClientUrl("~/Styles/Site.cs")%>

    区别: <%=ResolveClientUrl("~/Styles/Site.cs")%> 和 <%=ResolveUrl("~/Styles/Site ...

  6. rand值出现负数的解决方案

    当rand($number)或者mt_rand($number)的时候,$number太大,超过pow(2,31) - 1;即整型最大值的时候,会出现负数. 如果只是单纯转换成整数而已的话,可以采用s ...

  7. 文本编辑器Nano实用快捷键

    一.复制.剪切和粘贴文本 1.行复制.剪切和粘贴 Alt+6:复制光标所在行. Ctrl+K:剪切光标所在行. Ctrl+U:粘贴. 2.自由复制.剪切和粘贴 自由复制: Ctrl+6:设置复制文本的 ...

  8. 已知json类型根据类型封装集合

    1编写帮助类根绝url得到json public static string Post(string url) { string strURL = url; //创建一个HTTP请求 HttpWebR ...

  9. 探索 Linux 内存模型--转

    引用:http://www.ibm.com/developerworks/cn/linux/l-memmod/index.html 理解 Linux 使用的内存模型是从更大程度上掌握 Linux 设计 ...

  10. Helpers\Document

    Helpers\Document The document class is a collection of useful methods for working with files. To get ...