码迷,mamicode.com
首页 > 其他好文 > 详细

选项卡

时间:2017-04-04 23:18:16      阅读:242      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!