本文实例为大家分享了js实现选项卡效果的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html> <head> <title></title> </head> <script type="text/JavaScript"> window.onload=function(){ var ob = document.getElementById('div1'); var ob1 = div1.getElementsByTagName('input'); var ob2= div1.getElementsByTagName('div'); for(var i = 0;i< ob1.length;i++){ ob1[i].index=i; ob1[i].onmouseover=function(){ for(var i = 0;i< ob1.length;i++){ ob2[i].style.display='none'; ob1[i].className=''; } this.className='active'; ob2[this.index].style.display='block'; } ob1[i].onmouseout=function(){ for(var i=0 ; i< ob1.length;i++){ ob2[i]['style']['display']='none'; } } } }; </script> <body> <style type="text/CSS"> #div1 div{ width: 100px; height: 100px; border-top: 2px solid grey; background-color: #ccc; } .active { background-color: yellow; } </style> <div id="div1"> <input type="button" value="1" class="active"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="4"> <div style="display:block;" >1111</div> <div style="display: none;">2222</div> <div style="display: none;">3333</div> <div style="display: none;">4444</div> </div> </body> </html>