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;}