选项卡在我们日常写网页中经常用到，在360浏览器首页中就用到很多的选项卡，我就模仿360首页的选项卡做一个案例，使用面向对象的方法来写。面向对象在这个小案例中会显得很麻烦，但是在大型开发中会简单很多，所以要学会使用。
其主要思想就是，先让所有的div块隐藏，然后让第一个显示，记录每个按钮当前的位置，然后设置其他div的隐藏，当前div的显示。
最终效果图如下：
代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 input{ width: 50px; background: white; } /*选中时候的样式*/ #div1 input.active{ background: yellow; border-top-color: #008000; font-weight:900 ; } #div1 div{ width: 200px; height: 300px; background: #FFF; border: dashed; display: none; } </style> <script> window.onload=function(){ new TabSwitch('div1'); }; function TabSwitch(id){ var _this=this; var oDiv=document.getElementById('div1'); this.aBtn=oDiv.getElementsByTagName('input'); this.aDiv=oDiv.getElementsByTagName('div'); for(var i=0;i<this.aBtn.length;i++){ this.aBtn[i].index=i; this.aBtn[i].onclick=function () { _this.fnClick(this); }; } }; TabSwitch.prototype.fnClick=function (oBtn) { for (var i=0;i<this.aBtn.length;i++){ this.aBtn[i].className=''; this.aDiv[i].style.display='none'; } oBtn.className='active'; this.aDiv[oBtn.index].style.display='block'; }; </script> </head> <body> <div id="div1"> <input id="btn1" type="button" value="热播" class="active"> <input id="btn2" type="button" value="视频"> <input id="btn3" type="button" value="电影"> <input id="btn4" type="button" value="花边"> <div style="display: block;">热播电视剧</div> <div>热播视频</div> <div>热播电影</div> <div>花边新闻</div> </div> </body> </html> |
eee