选项卡

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

思路:获取一级列表项

       改变颜色

　　让二级菜单显示

　　移出事件

　　让二级菜单隐藏

html代码

<div class='wrap'>
        <div class='all-sort-list'>
            <div class='item bo'>
                <h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
                <div class="item-list clearfix">
                    <div class="close">x</div>
                    <div class="subitem">
                        <dl class="fore1">
                            <dt><a href="#">电子书1</a></dt>
                            <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>
                        </dl>
                    </div>
                    <div class="cat-right">
                        <dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
                            <dd>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>

css代码这里就省略不写了

js代码

var list=document.getElementByClassName("item");
for(var i=0;i<list.length;i++){
    list[i].onmouseover=function(){
    this.firstElementChild.setAttribute("class","changecolor");
    this.lastElementChild.style.display="block";
}       
    list[i].onmouseout=function(){
   this.firstElementChild.removeAttribute("class");
   this.lastElementChild.style.display="none";
}
}