标签:mouse category 改变颜色 get setattr remove use sub attr
现在每个网站几乎都会有选项卡,我们今天就试着写选项卡
思路:获取一级列表项
改变颜色
让二级菜单显示
移出事件
让二级菜单隐藏
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 }
标签:mouse category 改变颜色 get setattr remove use sub attr
原文地址:http://www.cnblogs.com/caixiufang/p/6666623.html