没事自己弄着玩，写了个tab页。不要当真。想看就看看。希望相互学习。
效果预览：
html源码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tabs</title> 6 <script type="text/javascript" src='/images/loading.gif' data-original="jquery-1.10.1.js"></script> 7 <script type="text/javascript" src='/images/loading.gif' data-original="tabs.js"></script> 8 <style type="text/css"> 9 body{10 background-color: #fff;11 }12 p{13 color:green;14 text-align: center;15 font-size: 22px;16 margin:0px;17 padding:0px;18 }19 .tabs{20 /* border: 1px solid green; */21 }22 .tab_titles{23 border: 1px solid #ccc;24 margin:1px 1px -1px 5px;25 padding: 3px;26 border-radius: 10px 10px 0px 0px;27 float: left;28 cursor: pointer;29 }30 .tab_titles_inner{31 width:100%;32 height: 100%;33 text-align: center;34 }35 .tab_selected{36 border-bottom: 1px solid white;37 margin-bottom:-1px;38 border-radius: 10px 10px 0px 0px;39 }40 .contents{41 border:1px solid #ccc;42 width:100%;43 height:800;44 margin-left: 5px;45 padding:5px;46 }47 .clear_float{48 height: 0px;49 width:0px;50 clear: both;51 }52 </style>53 </head>54 <body>55 <p>PheonixHkbxoic</p>56 <div class="tabs">57 <div>0</div>58 <div>1</div>59 <div>2</div>60 </div>61 <script type="text/javascript">62 var title = ["java","c/++","js/jquery"];63 var src = [64 'http://www.baidu.com',65 'http://www.360.com',66 'http://www.csdn.net'67 ];68 var MyTabs = tabs.init(title,src);69 MyTabs.setTabTitlesStyle("width","100px");70 MyTabs.select(1);71 72 // var _$$ = $$(title,src);73 // _$$.select(1);74 // _$$.setTabTitlesStyle("width","100px");75 76 77 </script>78 </body>79 </html>
js源码：
1 /** 2 * @FileName : tabs.js 3 * @Author : PheonixHkbxoic 4 * @Mail : hkbxoic@gmail.com 5 * @DateTime : 2016-07-03 13:18:55 6 * @Version : v1.0.0 7 * @Description: Description 8 */ 9 10 (function(w){ 11 12 var tabs = function(tab_titles,tab_content_srcs){ 13 return new tabs.fn._init(tab_titles,tab_content_srcs); 14 } 15 16 tabs.fn = tabs.prototype = {//对象原型，对象属性,由类(构造函数)创建的所有对象都拥有的这些属性 17 tab_titles : [], 18 tab_content_srcs : [], 19 len : 0, 20 tab_selected : 0, 21 tab_selectedTitle_color: "purple", 22 setTabTitles : function(titles){ 23 this.tab_titles = titles; 24 }, 25 setTabContentSrcs :function(contentSrcs){ 26 this.tab_content_srcs = contentSrcs; 27 }, 28 setLen :function(len){ 29 this.len = len|0; 30 }, 31 _init : function(tab_titles,tab_content_srcs){ 32 this.setTabTitles(tab_titles); 33 this.setTabContentSrcs(tab_content_srcs); 34 this.setLen(tab_titles.length); 35 tabs.currentSrc = tab_content_srcs[0]; 36 37 //add class to tab contents 38 $(".tabs div").each(function(index, el) { 39 $(this).addClass("contents"); 40 $(this).addClass("content_"+index); 41 }); 42 43 //根据tab title 数组 创建tab title div 44 var _title = "<div class=\"clear_float\">.</div>"; 45 $(".tabs").prepend(_title); 46 for (var i = tab_titles.length-1; i >= 0; i--) { 47 _title = "<div id=\"tab_titles_"+i+"\" class=\"tab_titles\"><div class=\"tab_titles_inner\">"+tab_titles[i]+"</div></div>"; 48 $(".tabs").prepend(_title); 49 }; 50 //默认选中第0个 51 tabs.select(0); 52 53 //添加点击事件 54 $(".tab_titles").each(function(index, el) { 55 $(this).on('click', function(event) { 56 event.preventDefault(); 57 tabs.fn.tab_selected = index; 58 tabs.currentSrc = tab_content_srcs[index]; 59 tabs.select(index); 60 }); 61 }); 62 return this; 63 } 64 }; 65 tabs.fn._init.prototype = tabs.fn; 66 67 var tab_properties = {//类属性 68 currentSrc : "", 69 init : function(tab_titles,tab_content_srcs){ 70 var _tabs = new tabs(tab_titles, tab_content_srcs); 71 return _tabs; 72 }, 73 select: function(index){//设置选中第几个 74 //清除之前选中 75 $(".tab_titles").each(function(i, el) { 76 $(this).removeClass("tab_selected"); 77 $("#tab_titles_"+i).css('color', 'green'); 78 }); 79 //选中所选 80 $("#tab_titles_"+index).addClass('tab_selected'); 81 $("#tab_titles_"+index).css('color', tabs.fn.tab_selectedTitle_color); 82 83 tabs.hideContents();//都隐藏 84 tabs.showContents(index);//默认显示第一个 85 86 //加载数据 87 tabs.loadHtml(index,tabs.currentSrc); 88 }, 89 setTabTitlesStyle : function(styleName,styleValue,index){ 90 if (typeof index == 'number'&&index>-1) { 91 $("#tab_titles_"+index).css(styleName,styleValue); 92 }else{ 93 $(".tab_titles").each(function(index, el) { 94 $(this).css(styleName,styleValue); 95 }); 96 } 97 }, 98 hideContents : function(index){//index隐藏 99 if (typeof index == 'number'&&index>-1) {100 $(".content_"+index).hide();101 }else{102 $(".contents").each(function(index, el) {103 $(this).hide();104 });105 }106 },107 showContents : function(index){//index显示108 if (typeof index == 'number'&&index>-1){109 $(".content_"+index).show();110 }else{111 $(".contents").each(function(index, el) {112 $(this).show(); 113 });114 } 115 },116 setSelectedTitlecolor : function(color){117 tabs.fn.tab_selectedTitle_color = color;118 },119 loadHtml : function(index,url){120 $(".content_"+index).html("<iframe src='/images/loading.gif' data-original=\""+url+"\" style=\"height:1000px;width:100%;border:none;\"></iframe>");121 }122 123 }124 125 tabs.extend = tabs.fn.extend = function(){126 var target = arguments[0]||{};127 for(name in target){128 this[name] = target[name];129 }130 return target;131 };132 tabs.extend(tab_properties); //类属性赋值133 tabs.fn.extend(tab_properties); //对象属性赋值134 135 w.$$ = w.tabs = tabs;136 137 })(window);
原标题：自制tab页
关键词：
我知道了 