JS与JQ基础练习---侧栏二级菜单操作

js效果演示
<script>
     window.onload=function()
    {
        Oli=document.getElementById("navbox").getElementsByTagName("li");
        Odiv=document.getElementById("navbox").getElementsByTagName("div");
        for(var i=0;i<Oli.length;i++) //for循环所有的li长度
        {
            Oli[i].index=i;
            
            Oli[i].onmouseover =function()//鼠标经过显示
            {
                for(var i=0;i<Oli.length;i++)
                {    
                    if(i == this.index) 
                    {Odiv[i].style.display="block";} 
                    else {Odiv[i].style.display="none";}
                    
                }
            };
            
            Oli[i].onmouseout =function()//鼠标移出隐藏
            {Odiv.style.display="none"};
            
        };
    };
 </script>

 

JQ效果演示
<script type="text/javascript">
    
        $(function(){
            
               $(".licon:gt(0)").hide();//除了第一个所有为.licon的类内容都隐藏
               
                var oli=$(".navlist li"); 
                
                oli.mouseover(function(){ //鼠标划过事件
                    
                        $(this).addClass("active"); //给li加样式
                        var oindex=oli.index(this); 
                        $(".licon").eq(oindex).show(); 
                        
                    });
                oli.mouseout(function(){ //鼠标移出事件
                        $(this).removeClass("active");//清除li样式
                        $(".licon").hide(); 
                        
                    });
           
            });
            
    </script>

 

<!--html内容-->
<!--侧导航效果开始-->
<div class="nav">
    <ul class="navlist" id="navbox">
        <li >
                <a href="#">一生平安</a>
             <!--划过内容开始-->
                 <div class="licon" id="con">一生平安内容</div>
             <!--划过内容结束-->
        </li>
        <li>
            <a href="#">二龙腾飞</a>
            <!--划过内容开始-->
                 <div class="licon">二龙腾飞内容</div>
             <!--划过内容结束-->
        </li>
        <li><a href="#">三阳开泰</a>
            <!--划过内容开始-->
                 <div class="licon">二龙腾飞内容</div>
             <!--划过内容结束-->
        </li>
        <li><a href="#">四平八稳</a></li>
        <li><a href="#">五谷丰登</a></li>
        <li><a href="#">六神无主</a></li>
        <li><a href="#">七步之才</a></li>
        <li><a href="#">八面玲珑</a></li>
        <li><a href="#">九霄云外</a></li>
        <li><a href="#">十全十美</a></li>
    </ul>
</div>
<!--侧导航效果结束-->

 

/*css样式*/
        a{text-decoration:none;}
        .nav{width:135px;height:500px;margin:20px auto;border:1px solid #F00;}
        .navlist{}
        .navlist li{display:block;padding-left:35px;line-height:30px;border-bottom:1px solid #f16f6f;position:relative; }
        .navlist li.active{line-height:20px;border:1px solid #000;padding:5px 35px;}
        .navlist li a{color:#666;font-size:14px;}
        .navlist li a:hover{text-decoration:underline;color:#F00;font-weight:600;}
        
        .licon{width:400px;height:300px;border:1px solid #F00; background-color:#fff;padding:10px;position:absolute;left:135px;top:-1px;display:none;}

 

转载于:https://www.cnblogs.com/ninali/archive/2013/05/15/3080280.html