<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>
<style type="text/css">
ul,li{ list-style: none;}
.tabbox ul{ float: left; width: 100%; padding-left: 5px; border-bottom:1px solid #ddd;}
.tabbox li{ float: left; padding:7px 0px; margin-right: 15px; font-weight: bold; cursor: pointer;}
.tabbox li.active{ color: #2090ff; border-bottom: 2px solid #2090ff; margin-bottom: -1px;}
.tab_box{float: left; width: 100%;}
</style>
</head>
<body>
<div class="tabbox" id="tabes">
<ul>
<li class="active">11111111</li>
<li>22222222222</li>
<li>333333333</li>
</ul>
<div class="tab_box">
<div class="tab_centent">
11111111
</div>
<div class="tab_centent">
22222222222
</div>
<div class="tab_centent">
333333333
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="tabbox" id="tabs">
<ul>
<li class="active">11111111</li>
<li>22222222222</li>
<li>333333333</li>
</ul>
<div class="tab_box">
<div class="tab_centent">
11111111
</div>
<div class="tab_centent">
22222222222
</div>
<div class="tab_centent">
333333333
</div>
</div>
<div class="clearfix"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#tabes").tabs();
$("#tabs").tabs({Action:"mousemove"});
});
//插件内容
;(function($){
$.fn.tabs = function(options){
var defualt = {
Action:"click"
}
var options = $.extend(defualt, options);
this.each(function() {
var _this = $(this);
var index = _this.find("ul li.active").index();
_this.find('.tab_centent').eq(index).siblings().hide()
_this.find("ul li").on(options.Action,function() {
var active = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
_this.find('.tab_centent').eq(active).show().siblings().hide();
});
});
}
})(jQuery);
</script>
</body>
</html>
