Jquery 自制-tabs组件
总是去别人那边拿代码 发现很难完全满足项目的需求 索性花点时间 自己写一个 不过花费的时间比我想象的要久 还有很多不足 留给以后改正
JS代码：
1 var myTabs = function (container,titleArr, titleContainer, contentContainer) { 2 this.$container = $(container); 3 this.$title = $(titleContainer); 4 this.$contents = $(contentContainer); 5 6 this.init(titleArr); 7 this.tabChange(); 8 } 9 10 myTabs.prototype = { 11 //初始化 12 init: function (arr) { 13 this.$title.addClass('myTab_title'); 14 this.$contents.addClass('myTab_content'); 15 16 var i = 0, 17 len = arr.length; 18 19 for (; i < len; i++) { 20 this.$title.append('<li class="myTab_title_no"><a href="#tabs_' + i + '">' + arr[i] + '</a></li>'); 21 } 22 23 this.hideAllDivs(); 24 25 var firstTitle = this.$title.find("li:first"); 26 var firstDiv = this.$contents.find('div:first'); 27 28 $(firstTitle).addClass('myTab_title_active'); 29 $(firstDiv).show(); 30 }, 31 //切换 32 tabChange: function () { 33 var tThis = this; 34 tThis.$title.find('li').on('click', function (e) { 35 e.preventDefault(); 36 37 var tablink = $(this).find('a').attr('href'); 38 39 if ($(tablink).is(':hidden')) { 40 tThis.hideAllDivs(); 41 $(tablink).show(); 42 43 $(this).addClass('myTab_title_active').siblings().removeClass('myTab_title_active'); 44 } 45 }); 46 }, 47 //隐藏 48 hideAllDivs: function () { 49 var alldivs = this.$contents.find('div'); //children 50 $.each(alldivs, function (index, ele) { 51 $(ele).hide(); 52 }); 53 } 54 }
CSS代码（本来想尝试一下less的 为了防止别的项目要用 还是算了 并且这里的样式并不复杂）:
1 /*标题*/ 2 .myTab_title{ 3 display:block; 4 list-style-type:disc; 5 margin:0; 6 padding:0; 7 } 8 9 .myTab_title li{ 10 float:left; 11 list-style:none; 12 margin-right:2px; 13 } 14 15 .myTab_title li a{ 16 display:block; 17 padding:10px 15px; 18 text-decoration:none; 19 color:#808080; 20 } 21 22 /*初始样式*/ 23 .myTab_title_no{ 24 border-top:2px solid #fff; 25 } 26 27 /*鼠标点击*/ 28 .myTab_title_active{ 29 border-top:2px solid #ca4141; 30 } 31 32 /*内容*/ 33 .myTab_content{ 34 width:100%; 35 clear:both; 36 }
HTML：
1 <div id="tabs_container"> 2 <ul id="tabs_title"></ul> 3 <div id="tabs_content"> 4 <div id="tabs_0"> 5 <p>1</p> 6 <p>1</p> 7 <p>1</p> 8 </div> 9 <div id="tabs_1"> 10 <p>2</p> 11 </div> 12 <div id="tabs_2"> 13 <p>3</p> 14 </div> 15 </div> 16 </div>
这里说明一下 内容放置区域 tabs_ 必须这么写 不然JS获取不到 完了tabs_里面的东西 可以随便写 我这里就不加滚动条了 根据项目 自己选择
如何调用，除了引入CSS和JS 需要添加的代码是：
var tab1 = new myTabs("#tabs_container", ["程序", "设计", "规划"], "#tabs_title", "#tabs_content");
参数说明：
1. 整个容器
2. 所有标题
3. 标题容器
4. 内容容器
