您的位置：首页 > Web前端 > JQuery

jQuery选项卡插件、Tabs插件

2016-10-26 11:01 489 查看
效果图：



<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航