这篇文章主要为大家详细介绍了js实现选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="4"> <div >1111</div> <div>2222</div> <div>3333</div> <div>4444</div> </div> </body> </html>
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: