jQuery选项卡插件、Tabs插件

效果图：
<!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>