首页 > 代码库 > jacascript 原生选项卡插件
jacascript 原生选项卡插件
前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
一直以来没自己写过插件，今天写个简单的面向对象的选项卡，发现了很多问题：
- var that = this; 的时候忘记加 var；
- setInterval 的用法不是很熟练；
- 写完插件，必须得实例化2个以上多次检查，上面两个问题查了我很长时间；
在布局的时候，想到了很多以前看到过的案例，再次熟悉一下：
- a链接之间的竖线：可以用a链接的border-right/left; 也可以直接 | ；还可以再加个行内元素，用它的border-right/left，
- 我这里在a链接之间加了个i，在结尾处有1px的误差，以后再处理;
- a链接（行内元素）之间的间隙，可以用浮动解决； 也可以把元素的首尾互相连接；
- 某一板块，不论点击哪里都会跳转：可以直接用a链接包住；也可以用a链接遮罩；
代码都写在一起，很乱，命名也不规范，还有很多不足；
第一种原型是直接写的，第二种原型是字面对象的；
继续学习下用立即函数的写法，以后在贴上来；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡原生插件</title> <style type="text/css"> /*重置样式*/ *{ padding: 0; margin: 0; } body{ font: 14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3"; } li{ list-style: none; } a{ color: #333; text-decoration: none; } .clearfix:before, /*:before处理margin上下重叠*/ .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /*选项卡样式*/ .tab_wrapper_test1,.tab_wrapper_test2{ width: 480px; height: 400px; margin: 50px auto; border: 1px solid #ccc; position: relative; } .prev,.next{ width: 30px; height: 30px; background: rgba(0,0,0,0.3); position: absolute; z-index: 999; top: 190px; color: #fff; text-align: center; line-height: 30px; font-weight: bold; font-size: 18px; font-family: SimSun, Arial; } .prev{ left: 15px; } .next{ right: 15px; } .tab_menu{ font-size: 18px; height: 49px; margin-right: -1px; border-bottom: 1px solid #ccc; overflow: hidden; } .tab_menu a{ display: inline-block; text-align: center; line-height: 50px; padding: 0 10px; width: 39px; } .border_right{ border-right: 1px solid #ccc; } .menu_active{ background: #0ff; } .tab_content{ height: 350px; } .tab_con_item{ display: none; } .con_active{ display: block; } /*第一页*/ .tab_con_href_half{ display: block; text-align: center; height: 310px; line-height: 310px; } .tab_con_href_half img{ max-width: 100%; vertical-align: middle; } .tab_con_txt_half{ border-top: 1px solid #ccc; height: 39px; text-align: center; line-height: 40px; font-size: 18px; } /*第二页*/ .tab_con_href_all{ display: block; text-align: center; overflow: hidden; } .tab_con_href_all img{ height: 350px; } .tab_con_txt_all{ position: absolute; bottom: 0; height: 39px; width: 100%; /*绝对定位之后，可以用width：100%，来扩宽，然后text-align:center; 水平居中*/ text-align: center; line-height: 40px; font-size: 18px; background: rgba(0,0,0,0.6); } .tab_con_txt_all a{ color: #fff; } /*第三页、第四页、第五页*/ .tab_con_href_mask_li{ text-align: center; height: 350px; position: relative; } .tab_con_href_mask_img{ height: 310px; line-height: 310px; overflow: hidden; } .tab_con_href_mask_img img{ max-width: 100%; vertical-align: middle; } .tab_con_mask_txt{ border-top: 1px solid #ccc; height: 39px; text-align: center; line-height: 40px; font-size: 18px; } .tab_con_href_mask{ position: absolute; display: block; width: 100%; height: 350px; top: 0; left: 0; z-index: 998; } /*第四页*/ .tab_con_href_mask_img_4{ height: 350px; overflow: hidden; } .tab_con_href_mask_img_4 img{ height: 350px; } .tab_con_mask_txt_4{ position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.6); text-align: center; border-top: 1px solid #ccc; height: 39px; line-height: 40px; font-size: 18px; } .tab_con_mask_txt_4 a{ color: #fff; } </style> </head> <body> <div class="tab_wrapper_test1"> <div class="tab_menu"> <a href="javascript:;" class="menu_active">热点 </a><i class="border_right"></i><a href="javascript:;">社会 </a><i class="border_right"></i><a href="javascript:;">娱乐 </a><i class="border_right"></i><a href="javascript:;">军事 </a><i class="border_right"></i><a href="javascript:;">体育 </a><i class="border_right"></i><a href="javascript:;">财经 </a><i class="border_right"></i><a href="javascript:;">汽车 </a><i class="border_right"></i><a href="javascript:;">游戏</a> <!--这里的i是那个a之间的竖线，可以用a的border-right做，也可以直接写个| --> <!--inline-block之间有间隙，解决方法有：压缩代码、浮动、标签前后折叠--> </div> <div class="tab_content"> <ul> <li class="tab_con_item con_active"> <!--这里我用了3种方式写最外层的a链接--> <a href="javascript:;" class="tab_con_href_half"> <!--a链接只包住图片--> <img src="images/1.jpg" title="girl" alt="girl"/> </a> <div class="tab_con_txt_half"> <a href="javascript:;">美丽女孩人人爱</a> </div> </li> <li class="tab_con_item "> <a href="javascript:;" class="tab_con_href_all"> <!--a链接只包住所有--> <img src="images/cat.jpeg" title="cat" alt="cat"/> <div class="tab_con_txt_all"> <a href="javascript:;">可爱猫咪</a> </div> </a> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img"> <img src="images/xiaoxin.gif" title="蜡笔小新" alt="蜡笔小新"/> </div> <div class="tab_con_mask_txt"> <a href="javascript:;">动感超人biu biu</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/2.jpg" title="帅哥" alt="帅哥"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">帅男</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat3.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat2.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat3.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat.jpeg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> </ul> </div> <!--这里的箭头可以用图片，也可以用纯css代码，也可以用转义字符+SimSun字体--> <a href="javscript:;" class="prev"><</a> <a href="javscript:;" class="next">></a> </div> <div class="tab_wrapper_test2"> <div class="tab_menu"> <a href="javascript:;" class="menu_active">热点 </a><i class="border_right"></i><a href="javascript:;">社会 </a><i class="border_right"></i><a href="javascript:;">娱乐 </a><i class="border_right"></i><a href="javascript:;">军事 </a><i class="border_right"></i><a href="javascript:;">体育 </a><i class="border_right"></i><a href="javascript:;">财经 </a><i class="border_right"></i><a href="javascript:;">汽车 </a><i class="border_right"></i><a href="javascript:;">游戏</a> <!--这里的i是那个a之间的竖线，可以用a的border-right做，也可以直接写个| --> <!--inline-block之间有间隙，解决方法有：压缩代码、浮动、标签前后折叠--> </div> <div class="tab_content"> <ul> <li class="tab_con_item con_active"> <!--这里我用了3种方式写最外层的a链接--> <a href="javascript:;" class="tab_con_href_half"> <!--a链接只包住图片--> <img src="images/1.jpg" title="girl" alt="girl"/> </a> <div class="tab_con_txt_half"> <a href="javascript:;">美丽女孩人人爱</a> </div> </li> <li class="tab_con_item "> <a href="javascript:;" class="tab_con_href_all"> <!--a链接只包住所有--> <img src="images/cat.jpeg" title="cat" alt="cat"/> <div class="tab_con_txt_all"> <a href="javascript:;">可爱猫咪</a> </div> </a> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img"> <img src="images/xiaoxin.gif" title="蜡笔小新" alt="蜡笔小新"/> </div> <div class="tab_con_mask_txt"> <a href="javascript:;">动感超人biu biu</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/2.jpg" title="帅哥" alt="帅哥"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">帅男</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat3.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat2.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat3.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat.jpeg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> </ul> </div> <!--这里的箭头可以用图片，也可以用纯css代码，也可以用转义字符+SimSun字体--> <a href="javscript:;" class="prev"><</a> <a href="javscript:;" class="next">></a> </div> <script type="text/javascript"> window.onload = function(){ function TabControl(obj){ //选项卡菜单控制部分 this.oMenu = obj.getElementsByClassName(‘tab_menu‘)[0]; this.menuItem = this.oMenu.getElementsByTagName(‘a‘); //前后控制按钮 this.prev = obj.getElementsByClassName(‘prev‘)[0]; this.next = obj.getElementsByClassName(‘next‘)[0]; //选项卡内容部分 this.con = obj.getElementsByClassName(‘tab_content‘)[0]; this.conItem = this.con.getElementsByClassName(‘tab_con_item‘); //变量设置 //选项卡页数 this.count = this.conItem.length; //当前第几页，默认为第一页，也就是0 this.current = 0; //这里不要忘了var var that = this; //原型方法 //构造函数执行到这里的时候，会判断实例是否有menuSwitch方法， //第一次执行构造函数时，实例是没有menuSwitch方法的，就执行if方法块的代码； //之后再执行此构造函数时，原型上已经有这个方法了，就不会进入 //原型上的方法有很多，但是只用检测一个就行了，没必要都检测 if(typeof this.menuSwitch != ‘function‘){ //菜单控制 TabControl.prototype.menuSwitch = function(){ //清空所有class名 for(var j = 0;j < this.count; j++){ this.menuItem[j].className = ‘‘; this.conItem[j].className = ‘tab_con_item‘; } //给当前页添加class名 this.menuItem[this.current].className = ‘menu_active‘; this.conItem[this.current].className = ‘tab_con_item con_active‘; }; //前按钮控制 TabControl.prototype.btnPrevSwitch = function(){ if(this.current > 0){ //清空前页class名 this.menuItem[this.current].className = ‘‘; this.conItem[this.current].className = ‘tab_con_item‘; //页数自减1 this.current--; //当前页添加class名 this.menuItem[this.current].className = ‘menu_active‘; this.conItem[this.current].className = ‘tab_con_item con_active‘; }else if(this.current == 0){ //清空前页class名 this.menuItem[this.current].className = ‘‘; this.conItem[this.current].className = ‘tab_con_item‘; //页数跳转至最后一页 this.current = this.count-1; //当前页添加class名 this.menuItem[this.current].className = ‘menu_active‘; this.conItem[this.current].className = ‘tab_con_item con_active‘; } }; //后按钮控制 TabControl.prototype.btnNextSwitch = function(){ if(this.current < this.count-1){ //清空前页class名 this.menuItem[this.current].className = ‘‘; this.conItem[this.current].className = ‘tab_con_item‘; //页数自增1 this.current++; //当前页添加class名 this.menuItem[this.current].className = ‘menu_active‘; this.conItem[this.current].className = ‘tab_con_item con_active‘; }else if(this.current == this.count-1){ //清空前页class名 this.menuItem[this.current].className = ‘‘; this.conItem[this.current].className = ‘tab_con_item‘; //页数跳转至第一页 this.current = 0; //当前页添加class名 this.menuItem[this.current].className = ‘menu_active‘; this.conItem[this.current].className = ‘tab_con_item con_active‘; } }; } //菜单控制事件 for(var i = 0; i < this.count; i++){ //设置当前索引，这种设置方法需掌握 this.menuItem[i].index = i; this.menuItem[i].onclick = function(){ that.current = this.index; that.menuSwitch(); } } //前按钮控制 this.prev.onclick = function(){ that.btnPrevSwitch(); } //后按钮控制 this.next.onclick = function(){ that.btnNextSwitch(); } //自循环 var autoTimer = null; //直接执行 autoTimer = setInterval(function(){ that.btnNextSwitch(); },2000); //进入选项卡，清空计时器 obj.onmouseover = function(){ clearInterval(autoTimer); } //离开选项卡，计时器开始工作 obj.onmouseout = function(){ autoTimer = setInterval(function(){ that.btnNextSwitch(); },2000); } } var oTab1 = document.getElementsByClassName(‘tab_wrapper_test1‘)[0]; var tab1 = new TabControl(oTab1); var oTab2 = document.getElementsByClassName(‘tab_wrapper_test2‘)[0]; var tab2 = new TabControl(oTab2); } </script> </body> </html>
第二种，原型是字面对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡原生插件</title> <style type="text/css"> /*重置样式*/ *{ padding: 0; margin: 0; } body{ font: 14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3"; } li{ list-style: none; } a{ color: #333; text-decoration: none; } .clearfix:before, /*:before处理margin上下重叠*/ .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /*选项卡样式*/ .tab_wrapper_test1,.tab_wrapper_test2{ width: 480px; height: 400px; margin: 50px auto; border: 1px solid #ccc; position: relative; } .prev,.next{ width: 30px; height: 30px; background: rgba(0,0,0,0.3); position: absolute; z-index: 999; top: 190px; color: #fff; text-align: center; line-height: 30px; font-weight: bold; font-size: 18px; font-family: SimSun, Arial; } .prev{ left: 15px; } .next{ right: 15px; } .tab_menu{ font-size: 18px; height: 49px; margin-right: -1px; border-bottom: 1px solid #ccc; overflow: hidden; } .tab_menu a{ display: inline-block; text-align: center; line-height: 50px; padding: 0 10px; width: 39px; } .border_right{ border-right: 1px solid #ccc; } .menu_active{ background: #0ff; } .tab_content{ height: 350px; } .tab_con_item{ display: none; } .con_active{ display: block; } /*第一页*/ .tab_con_href_half{ display: block; text-align: center; height: 310px; line-height: 310px; } .tab_con_href_half img{ max-width: 100%; vertical-align: middle; } .tab_con_txt_half{ border-top: 1px solid #ccc; height: 39px; text-align: center; line-height: 40px; font-size: 18px; } /*第二页*/ .tab_con_href_all{ display: block; text-align: center; overflow: hidden; } .tab_con_href_all img{ height: 350px; } .tab_con_txt_all{ position: absolute; bottom: 0; height: 39px; width: 100%; /*绝对定位之后，可以用width：100%，来扩宽，然后text-align:center; 水平居中*/ text-align: center; line-height: 40px; font-size: 18px; background: rgba(0,0,0,0.6); } .tab_con_txt_all a{ color: #fff; } /*第三页、第四页、第五页*/ .tab_con_href_mask_li{ text-align: center; height: 350px; position: relative; } .tab_con_href_mask_img{ height: 310px; line-height: 310px; overflow: hidden; } .tab_con_href_mask_img img{ max-width: 100%; vertical-align: middle; } .tab_con_mask_txt{ border-top: 1px solid #ccc; height: 39px; text-align: center; line-height: 40px; font-size: 18px; } .tab_con_href_mask{ position: absolute; display: block; width: 100%; height: 350px; top: 0; left: 0; z-index: 998; } /*第四页*/ .tab_con_href_mask_img_4{ height: 350px; overflow: hidden; } .tab_con_href_mask_img_4 img{ height: 350px; } .tab_con_mask_txt_4{ position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.6); text-align: center; border-top: 1px solid #ccc; height: 39px; line-height: 40px; font-size: 18px; } .tab_con_mask_txt_4 a{ color: #fff; } </style> </head> <body> <div class="tab_wrapper_test1"> <div class="tab_menu"> <a href="javascript:;" class="menu_active">热点 </a><i class="border_right"></i><a href="javascript:;">社会 </a><i class="border_right"></i><a href="javascript:;">娱乐 </a><i class="border_right"></i><a href="javascript:;">军事 </a><i class="border_right"></i><a href="javascript:;">体育 </a><i class="border_right"></i><a href="javascript:;">财经 </a><i class="border_right"></i><a href="javascript:;">汽车 </a><i class="border_right"></i><a href="javascript:;">游戏</a> <!--这里的i是那个a之间的竖线，可以用a的border-right做，也可以直接写个| --> <!--inline-block之间有间隙，解决方法有：压缩代码、浮动、标签前后折叠--> </div> <div class="tab_content"> <ul> <li class="tab_con_item con_active"> <!--这里我用了3种方式写最外层的a链接--> <a href="javascript:;" class="tab_con_href_half"> <!--a链接只包住图片--> <img src="images/1.jpg" title="girl" alt="girl"/> </a> <div class="tab_con_txt_half"> <a href="javascript:;">美丽女孩人人爱</a> </div> </li> <li class="tab_con_item "> <a href="javascript:;" class="tab_con_href_all"> <!--a链接只包住所有--> <img src="images/cat.jpeg" title="cat" alt="cat"/> <div class="tab_con_txt_all"> <a href="javascript:;">可爱猫咪</a> </div> </a> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img"> <img src="images/xiaoxin.gif" title="蜡笔小新" alt="蜡笔小新"/> </div> <div class="tab_con_mask_txt"> <a href="javascript:;">动感超人biu biu</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/2.jpg" title="帅哥" alt="帅哥"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">帅男</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat3.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat2.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat3.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat.jpeg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> </ul> </div> <!--这里的箭头可以用图片，也可以用纯css代码，也可以用转义字符+SimSun字体--> <a href="javscript:;" class="prev"><</a> <a href="javscript:;" class="next">></a> </div> <div class="tab_wrapper_test2"> <div class="tab_menu"> <a href="javascript:;" class="menu_active">热点 </a><i class="border_right"></i><a href="javascript:;">社会 </a><i class="border_right"></i><a href="javascript:;">娱乐 </a><i class="border_right"></i><a href="javascript:;">军事 </a><i class="border_right"></i><a href="javascript:;">体育 </a><i class="border_right"></i><a href="javascript:;">财经 </a><i class="border_right"></i><a href="javascript:;">汽车 </a><i class="border_right"></i><a href="javascript:;">游戏</a> <!--这里的i是那个a之间的竖线，可以用a的border-right做，也可以直接写个| --> <!--inline-block之间有间隙，解决方法有：压缩代码、浮动、标签前后折叠--> </div> <div class="tab_content"> <ul> <li class="tab_con_item con_active"> <!--这里我用了3种方式写最外层的a链接--> <a href="javascript:;" class="tab_con_href_half"> <!--a链接只包住图片--> <img src="images/1.jpg" title="girl" alt="girl"/> </a> <div class="tab_con_txt_half"> <a href="javascript:;">美丽女孩人人爱</a> </div> </li> <li class="tab_con_item "> <a href="javascript:;" class="tab_con_href_all"> <!--a链接只包住所有--> <img src="images/cat.jpeg" title="cat" alt="cat"/> <div class="tab_con_txt_all"> <a href="javascript:;">可爱猫咪</a> </div> </a> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img"> <img src="images/xiaoxin.gif" title="蜡笔小新" alt="蜡笔小新"/> </div> <div class="tab_con_mask_txt"> <a href="javascript:;">动感超人biu biu</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/2.jpg" title="帅哥" alt="帅哥"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">帅男</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat3.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat2.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat3.jpg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> <li class="tab_con_item "> <div class="tab_con_href_mask_li"> <div class="tab_con_href_mask_img_4"> <img src="images/cat.jpeg" title="猫咪" alt="猫咪"/> </div> <div class="tab_con_mask_txt_4"> <a href="javascript:;">猫咪</a> </div> <a href="javascript:;" class="tab_con_href_mask"> <!--a链接做遮罩层--> </a> </div> </li> </ul> </div> <!--这里的箭头可以用图片，也可以用纯css代码，也可以用转义字符+SimSun字体--> <a href="javscript:;" class="prev"><</a> <a href="javscript:;" class="next">></a> </div> <script type="text/javascript"> window.onload = function(){ function TabControl(obj){ //选项卡菜单控制部分 this.oMenu = obj.getElementsByClassName(‘tab_menu‘)[0]; this.menuItem = this.oMenu.getElementsByTagName(‘a‘); //前后控制按钮 this.prev = obj.getElementsByClassName(‘prev‘)[0]; this.next = obj.getElementsByClassName(‘next‘)[0]; //选项卡内容部分 this.con = obj.getElementsByClassName(‘tab_content‘)[0]; this.conItem = this.con.getElementsByClassName(‘tab_con_item‘); //变量设置 //选项卡页数 this.count = this.conItem.length; //当前第几页，默认为第一页，也就是0 this.current = 0; var that = this; //菜单控制事件 for(var i = 0; i < this.count; i++){ //设置当前索引，这种设置方法需掌握 this.menuItem[i].index = i; this.menuItem[i].onclick = function(){ that.current = this.index; that.menuSwitch(); } } //原型方法 //构造函数执行到这里的时候，会判断实例是否有menuSwitch方法， //第一次执行构造函数时，实例是没有menuSwitch方法的，就执行if方法块的代码； //之后再执行此构造函数时，原型上已经有这个方法了，就不会进入 //原型上的方法有很多，但是只用检测一个就行了，没必要都检测 if(typeof this.menuSwitch != ‘function‘){ //原型还可以用字面对象的形式，但要记得手动改变constructor指向， TabControl.prototype = { //字面对象的方式会改变constructor指向，我们手动改变回来 constructor : TabControl, //菜单控制 menuSwitch : function(){ //清空所有class名 for(var j = 0;j < this.count; j++){ this.menuItem[j].className = ‘‘; this.conItem[j].className = ‘tab_con_item‘; } //给当前页添加class名 this.menuItem[this.current].className = ‘menu_active‘; this.conItem[this.current].className = ‘tab_con_item con_active‘; }, //前按钮控制 btnPrevSwitch : function(){ if(this.current > 0){ //清空前页class名 this.menuItem[this.current].className = ‘‘; this.conItem[this.current].className = ‘tab_con_item‘; //页数自减1 this.current--; //当前页添加class名 this.menuItem[this.current].className = ‘menu_active‘; this.conItem[this.current].className = ‘tab_con_item con_active‘; }else if(this.current == 0){ //清空前页class名 this.menuItem[this.current].className = ‘‘; this.conItem[this.current].className = ‘tab_con_item‘; //页数跳转至最后一页 this.current = this.count-1; //当前页添加class名 this.menuItem[this.current].className = ‘menu_active‘; this.conItem[this.current].className = ‘tab_con_item con_active‘; } }, //后按钮控制 btnNextSwitch : function(){ if(this.current < this.count-1){ //清空前页class名 this.menuItem[this.current].className = ‘‘; this.conItem[this.current].className = ‘tab_con_item‘; //页数自增1 this.current++; //当前页添加class名 this.menuItem[this.current].className = ‘menu_active‘; this.conItem[this.current].className = ‘tab_con_item con_active‘; }else if(this.current == this.count-1){ //清空前页class名 this.menuItem[this.current].className = ‘‘; this.conItem[this.current].className = ‘tab_con_item‘; //页数跳转至第一页 this.current = 0; //当前页添加class名 this.menuItem[this.current].className = ‘menu_active‘; this.conItem[this.current].className = ‘tab_con_item con_active‘; } } } //初次调用时，重新调用构造函数返回 return new TabControl(obj); //return 构造函数时，实例就不是指向 var tab1 = new TabControl时系统创建的那个object1， //而是指向了return new TabControl时创建的object2，这两个对象的隐式原型是不一样的， //因为在创建object2之前已经修改了TabControl.prototype，
//所以object2的隐式原型已经指向了修改后的TabControl.prototype，因此可以找到原型上的方法 } //前按钮控制 this.prev.onclick = function(){ that.btnPrevSwitch(); } //后按钮控制 this.next.onclick = function(){ that.btnNextSwitch(); } //自循环 var autoTimer = null; //直接执行 autoTimer = setInterval(function(){ that.btnNextSwitch(); },2000); //进入选项卡，清空计时器 obj.onmouseover = function(){ clearInterval(autoTimer); } //离开选项卡，计时器开始工作 obj.onmouseout = function(){ autoTimer = setInterval(function(){ that.btnNextSwitch(); },2000); } } var oTab1 = document.getElementsByClassName(‘tab_wrapper_test1‘)[0]; var tab1 = new TabControl(oTab1); var oTab2 = document.getElementsByClassName(‘tab_wrapper_test2‘)[0]; var tab2 = new TabControl(oTab2); } </script> </body> </html>
jacascript 原生选项卡插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。