求JS高手帮我找出Bug 我想(实现鼠标移动到上面一个效果，鼠标离开效果保持)
<style>.tab-box{border:2pxsolidblue;width:340px;height:300px;}.tab-head-div{width:60p...
<style> .tab-box{ border: 2px solid blue; width: 340px; height: 300px; } .tab-head-div{ width: 60px; height: 30px; float: left; background-color:blue; margin: 2px; text-align: center; padding: 10px; cursor: pointer; display: block; } .tab-body-div{ display: none; } .tab-head .current{ background-color: white; } </style> </head> <body> <div class="tab-box"> <div class="tab-head"> <div class="tab-head-div current">标签一</div> <div class="tab-head-div">标签二</div> <div class="tab-head-div">标签三</div> <div class="tab-head-div">标签四</div> </div> <div class="tab-body"> <div class="tab-body-div current">111</div> <div class="tab-body-div">222</div> <div class="tab-body-div">333</div> <div class="tab-body-div">444</div> </div> </div> </body> <script> var tabs = document.getElementsByClassName('tab-head-div') var divs = document.getElementsByClassName('tab-body-div') for(var i=0; i<tabs.length; i++){ //遍历标签部分的元素对象 tabs[i].onmouseover=function(){ //为标签元素对象添加鼠标滑过事件 for(var i=0; i<divs.length; i++){ //遍历标签栏的内容元素对象 if(tabs[i]==this){ //显示当前鼠标画过的li元素 tabs[i].classList.add('current') divs[i].classList.add('current') }else{ //隐藏其它li元素 divs[i].classList.remove('current') tabs[i].classList.remove('current') } } } } </script>
展开
展开全部
是这个意思吗？
如果是的话，只需要添加一段CSS代码就行了
.current {display:block;}
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
