首页 > 代码库 > 选项卡
选项卡
现在每个网站几乎都会有选项卡,我们今天就试着写选项卡
思路:获取一级列表项
改变颜色
让二级菜单显示
移出事件
让二级菜单隐藏
html代码
1 <div class=‘wrap‘> 2 <div class=‘all-sort-list‘> 3 <div class=‘item bo‘> 4 <h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3> 5 <div class="item-list clearfix"> 6 <div class="close">x</div> 7 <div class="subitem"> 8 <dl class="fore1"> 9 <dt><a href="#">电子书1</a></dt> 10 <dd><em><a href="#">免费</a></em><em><a href="#">小说</a></em><em><a href="#">励志与成功</a></em><em><a href="#">婚恋/两性</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em></dd> 11 </dl> 12 </div> 13 <div class="cat-right"> 14 <dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c"> 15 <dd> 20 </dd> 21 </dl> 23 </div> 24 </div> 25 </div>
css代码这里就省略不写了
js代码
1 var list=document.getElementByClassName("item"); 2 for(var i=0;i<list.length;i++){ 3 list[i].onmouseover=function(){ 4 this.firstElementChild.setAttribute("class","changecolor"); 5 this.lastElementChild.style.display="block"; 6 } 7 list[i].onmouseout=function(){ 8 this.firstElementChild.removeAttribute("class"); 9 this.lastElementChild.style.display="none"; 10 } 11 }
选项卡
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。