js实现选项卡效果
(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )
本文实例为大家分享了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>
如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:基于JS正则表达式实现模板数据动态渲染(实现思路详解)