js选项卡 js实现选项卡效果
林西相心 人气:0<!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>
如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
加载全部内容