js 选项卡制作
知识回顾，制作JS选项卡，仅供参考
html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选项卡</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 text-decoration: none; 11 } 12 li{ 13 list-style-type: none; 14 } 15 div.con{ 16 position:relative; 17 width:300px; 18 height:400px; 19 background: #ccc; 20 margin: 100px auto; 21 border: 1px solid #531; 22 } 23 .title{ 24 width:100%; 25 height:40px; 26 background: #aaf; 27 border: 1px solid #eee; 28 } 29 .content{ 30 width:100%; 31 height:360px; 32 } 33 .title li{ 34 float:left; 35 display: inline-block; 36 width:25%; 37 text-align: center; 38 line-height: 40px; 39 cursor:pointer; 40 cursor:hand; 41 } 42 .content div li{ 43 height:30px; 44 line-height: 30px; 45 margin:0 20px; 46 } 47 .content div li span.nei{ 48 margin-left:10px; 49 } 50 </style> 51 </head> 52 <body> 53 <div class="con"> 54 <ul class="title"> 55 <li>销售</li> 56 <li>技术支持</li> 57 <li>研发</li> 58 <li>行政</li> 59 </ul> 60 <ul class="content"> 61 <div> 62 <li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">销售了一台电脑</span></a></li> 63 <li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">销售了一台键盘</span></a></li> 64 <li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">销售了一条牛仔裤</span></a></li> 65 <li><a href="javascript:;" class="he"><span class="tle">4</span><span class="nei">销售了一台手机屏幕</span></a></li> 66 <li><a href="javascript:;" class="he"><span class="tle">5</span><span class="nei">销售了一双筷子</span></a></li> 67 <li><a href="javascript:;" class="he"><span class="tle">6</span><span class="nei">销售了一件快递单纸箱</span></a></li> 68 </div> 69 <div> 70 <li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">维护了一台电脑</span></a></li> 71 <li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">维护了一台键盘</span></a></li> 72 <li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">更换了一条牛仔裤</span></a></li> 73 <li><a href="javascript:;" class="he"><span class="tle">4</span><span class="nei">维护了一台手机屏幕</span></a></li> 74 </div> 75 <div> 76 <li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">研发了一台电脑</span></a></li> 77 <li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">研发了一台键盘</span></a></li> 78 <li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">研发了一条牛仔裤</span></a></li> 79 <li><a href="javascript:;" class="he"><span class="tle">4</span><span class="nei">研发了一台手机屏幕</span></a></li> 80 <li><a href="javascript:;" class="he"><span class="tle">5</span><span class="nei">研发了一台手机屏幕</span></a></li> 81 </div> 82 <div> 83 <li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">发布了一项公告</span></a></li> 84 <li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">发布了一项通知</span></a></li> 85 <li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">发布了一则简讯</span></a></li> 86 </div> 87 </ul> 88 </div> 89 </body> 90 </html>View Code
js代码：
1.流程式结构：
1 window.onload = function(){ 2 var ali = document.querySelectorAll('.title li'); 3 var adiv = document.querySelectorAll('.content div'); 4 // 初始化 5 ali.forEach(function(oli,index){ 6 if(index ==0){ 7 oli.style.background = 'red'; 8 adiv[index].style.display = 'block'; 9 }else{ 10 oli.style.background = '#aaf'; 11 adiv[index].style.display = 'none'; 12 } 13 }); 14 // 设置动态改变选择li和显示div 15 ali.forEach(function(oli,index){ 16 oli.onclick = function(){ 17 for(var i=0;i<ali.length;i++){ 18 ali[i].style.background = '#aaf'; 19 adiv[i].style.display = 'none'; 20 } 21 this.style.background = 'red'; 22 adiv[index].style.display = "block"; 23 } 24 }); 25 };
2.对象式结构：
1 window.onload = function(){ 2 var Li_obj = { 3 ali : [], 4 adiv : [], 5 setange : function(){ 6 this.ali = document.querySelectorAll('.title li'); 7 this.adiv = document.querySelectorAll('.content div'); 8 }, 9 init:function(){ 10 this.setange(); 11 var that = this; 12 this.ali.forEach(function(oli,index){ 13 if(index==0){ 14 oli.style.background = 'red'; 15 that.adiv[index].style.display = 'block'; 16 }else{ 17 oli.style.background = '#aaf'; 18 that.adiv[index].style.display = 'none'; 19 }; 20 }); 21 }, 22 toogle:function(){ 23 var that = this ; 24 this.ali.forEach(function(oli,index){ 25 oli.onclick = function(){ 26 for(var i=0;i<that.ali.length;i++){ 27 that.ali[i].style.background = '#aaf'; 28 that.adiv[i].style.display = 'none'; 29 } 30 this.style.background = 'red'; 31 that.adiv[index].style.display = "block"; 32 } 33 }); 34 }, 35 }; 36 Li_obj.init(); 37 Li_obj.toogle(); 38 };
3.构造函数的原型对象式结构：
1 window.onload = function(){ 2 function getli(){ 3 this.ali = document.querySelectorAll('.title li'); 4 this.adiv = document.querySelectorAll('.content div'); 5 }; 6 getli.prototype.init = function(){ 7 var that = this ; 8 this.ali.forEach(function(oli,index){ 9 if(index==0){ 10 oli.style.background = 'red'; 11 that.adiv[index].style.display = 'block'; 12 }else{ 13 oli.style.background = '#aaf'; 14 that.adiv[index].style.display = 'none'; 15 }; 16 }); 17 }; 18 getli.prototype.toogle = function(){ 19 var that = this ; 20 this.ali.forEach(function(oli,index){ 21 oli.onclick = function(){ 22 for(var i=0;i<that.ali.length;i++){ 23 that.ali[i].style.background = '#aaf'; 24 that.adiv[i].style.display = 'none'; 25 } 26 this.style.background = 'red'; 27 that.adiv[index].style.display = "block"; 28 } 29 }); 30 } 31 var OLI = new getli(); 32 OLI.init(); 33 OLI.toogle(); 34 }
运行结果：
备注：以上结果运行环境：谷歌浏览器；ie浏览器不支持forEach函数，要改成for循环来进行
优质内容筛选与推荐>>1、设置语言环境
2、Intellij IDEA 快捷键整理
3、哈希索引和Btree索引
4、php干货
5、WOLF三个月学习精华心得体会