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 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 >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选项卡操作方法汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. docker /var/lib/docker/aufs/mnt 目录清理方法2. python+excel接口自动化获取token并作为请求参数进行传参操作3. Vuex localStorage的具体使用4. ASP.NET泛型三之使用协变和逆变实现类型转换5. python tkinter实现下载进度条及抖音视频去水印原理6. vue - props 声明数组和对象操作7. Notepad++如何安装Python插件？Notepad++插件怎么装？8. Web应用开发中的几个问题——使用javascript开发需知9. Python matplotlib画图时图例说明(legend)放到图像外侧详解10. 使用Android studio查看Kotlin的字节码教程
网公网安备