Js鼠标经过选项卡实现原理Tab
2018-12-24 15:13
232 查看
效果如下图:
实现原理:
选项卡顾名思义就是鼠标经过哪个模块就切换到相应的内容,其实就是个事件按钮添加一个className响应的内容通过display来实现。
1、首先获取事件元素:按钮和内容
2、通过for循环遍历所有的按钮添加鼠标事件(onmousemove);
3、清掉所有按钮中的高亮属性和内容的display样式
4、给当前经过的按钮添加一个高亮和对应内容的display显示为block
注意:给多个元素添加多个事件要用for循环遍历,
代码:
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标经过选项卡</title> <style> *{padding:0px;margin: 0px;} #tabBox{ width: 600px;height: 300px; border:1px solid #ddd; margin: 10px auto} ul{ height: 40px; line-height: 40px;width: 600px; background: #eee; } ul li{ float: left;list-style: none; width: 149px; text-align: center;cursor: pointer;border-right: 1px solid #fff;border-bottom: 1px solid #dedede; } ul li:last-child{border-right: 0px;} ul li.aseclect{ background: #fff;border-right:1px solid #ddd; border-bottom: 0px; } .tabContent div{padding:5px; display: none} </style> <script> window.οnlοad=function(){ var oTabBox=document.getElementById('tabTitle'); var oLi=document.getElementsByTagName('li'); var oTabContent=document.getElementById('tabContent'); var oDiv=oTabContent.getElementsByTagName('div'); for(var i=0;i<oLi.length;i++){ oLi[i].myIndex=i; oLi[i].οnmοusemοve=function(){ for (var j = 0; j<oLi.length; j++) { oLi[j].className=''; oDiv[j].style.display='none'; } oLi[this.myIndex].className='aseclect'; //alert(this.myIndex); oDiv[this.myIndex].style.display='block'; } } } </script> </head> <body> <div id='tabBox'> <ul> <li class="aseclect">第一个</li> <li class="">第二个</li> <li class="">第三个</li> <li class="">第四个</li> </ul> <div id='tabContent' class="tabContent"> <div style="display: block;"> 我是第一个 </div> <div> 我是第二个 </div> <div> 我是第三个 </div> <div> 我是第四个 </div> </div> </div> </body> </html>
相关文章推荐
- js鼠标经过tab选项卡时实现切换延迟
- jquery实现TAB选项卡鼠标经过带延迟效果的方法
- jquery实现TAB选项卡鼠标经过带延迟效果的方法
- tab选项卡在鼠标经过时实现切换延迟
- JS-JQ实现TAB选项卡
- Vue.js组件tab实现选项卡切换
- JS+CSS实现的经典tab选项卡效果代码
- (转)Arcgis for Js之鼠标经过显示对象名的实现
- 纯js实现网页tab选项卡切换效果
- JS实现的不规则TAB选项卡效果代码
- JS实现鼠标经过用户头像显示资料卡的效果,可点击
- Tab选项卡点击 滑动效果js实现
- js实现黑色简易的滑动门网页tab选项卡效果
- JS实现横向与竖向两个选项卡Tab联动的方法
- JS实现表格隔行换色,鼠标经过换色,单击换色,再单击还原等功能
- 使用js实现tab选项卡效果
- JS实现不规则TAB选项卡效果代码
- js实现图片显示局部,鼠标经过显示全部的效果
- JS实现侧边栏鼠标经过弹出框+缓冲效果
- jQuery实现的 “滑动门”(跟随鼠标滑动滑动的tab选项卡)效果