选项卡

Posted 2020-09-08 蔡秀芳

现在每个网站几乎都会有选项卡,我们今天就试着写选项卡

思路:获取一级列表项

       改变颜色

　　让二级菜单显示

　　移出事件

　　让二级菜单隐藏

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 }