頁籤

現在每個網站幾乎都會有頁籤,我們今天就試着寫頁籤

思路:擷取一級清單項

       改變顔色

　　讓二級菜單顯示

　　移出事件

　　讓二級菜單隐藏

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 }