<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>京东二级菜单</title>
<style>
*{
margin:0;
padding:0;
}
#box{
margin:100px 0 0 300px;
width:200px;
height:492px;
background:#ccc;
position:relative;
}
#list{
width:200px;
}
#list li{
list-style:none;
line-height:40px;
background:#f00;
text-indent:30px;
border-bottom:1px solid #333;
}
#list .active{
background:#333;
}
.active a{
color:#fff;
}
span{
float:right;
margin-right:20px;
color:#fff;
}
a{
text-decoration:none;
color:#333;
}
#con{
position:absolute;
left:200px;
top:0;
width:800px;
height:492px;
display:none;
}
#con div{
width:800px;
height:492px;
display:none;
line-height:490px;
font-size:200px;
text-align:center;
}
#con.show{
display:block;
}
#con .show{
display:block;
background:orange;
}
</style>
<script>
window.οnlοad=function(){//注意冒泡
var oLi=document.getElementsByTagName('li');
var oCon=document.getElementById('con');
var oDiv=oCon.getElementsByTagName('div');
var oUl=document.getElementById('list');
var oBox=document.getElementById('box');
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oUl.index=i;
oLi[i].οnmοuseenter=function(){//li的移入事件,添加class
for(var j=0;j<oLi.length;j++){
oLi[j].className='';//清空程序追加的每个li的class active
}
for(var k=0;k<oDiv.length;k++){
oDiv[k].className='';//清空程序追加的每个div的class show
}
oLi[this.index].className='active';//给当前li添加class active
oDiv[this.index].className='show';//给当前div添加class show
oCon.className='show';//给div所在父元素添加show
}
}
/*for(var j=0;j<oLi.length;j++){//当前div的移入事件,移入执行添加class操作
oDiv[j].οnmοuseenter=function(){
for(var k=0;k<oDiv.length;k++){
oDiv[k].className='';//清空程序追加的每个div的class show
}
this.className='show';//给当前div添加class show
oCon.className='show';//给div所在父元素添加show
}
}*/
/*for(var j=0;j<oLi.length;j++){//当前div的移出事件,移出执行remove class操作
oDiv[j].οnmοuseοut=function(){
for(var k=0;k<oDiv.length;k++){
oDiv[k].className='';
}
}
}*/
oBox.οnmοuseleave=function(){//给盒子父元素添加移出事件
for(var j=0;j<oDiv.length;j++){
oDiv[j].className='';//清空程序追加的每个div的class show
}
for(var i=0;i<oLi.length;i++){
oLi[i].className='';
}
oCon.className='';//清空程序追加的#con的class show
}
}
</script>
</head>
<body>
<div id="box">
<ul id="list">
<li><a href="###">1</a><span>></span></li>
<li><a href="###">2</a><span>></span></li>
<li><a href="###">3</a><span>></span></li>
<li><a href="###">4</a><span>></span></li>
<li><a href="###">5</a><span>></span></li>
<li><a href="###">6</a><span>></span></li>
<li><a href="###">7</a><span>></span></li>
<li><a href="###">8</a><span>></span></li>
<li><a href="###">9</a><span>></span></li>
<li><a href="###">10</a><span>></span></li>
<li><a href="###">11</a><span>></span></li>
<li><a href="###">12</a><span>></span></li>
</ul>
<div id="con">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>京东二级菜单</title>
<style>
*{
margin:0;
padding:0;
}
#box{
margin:100px 0 0 300px;
width:200px;
height:492px;
background:#ccc;
position:relative;
}
#list{
width:200px;
}
#list li{
list-style:none;
line-height:40px;
background:#f00;
text-indent:30px;
border-bottom:1px solid #333;
}
#list .active{
background:#333;
}
.active a{
color:#fff;
}
span{
float:right;
margin-right:20px;
color:#fff;
}
a{
text-decoration:none;
color:#333;
}
#con{
position:absolute;
left:200px;
top:0;
width:800px;
height:492px;
display:none;
}
#con div{
width:800px;
height:492px;
display:none;
line-height:490px;
font-size:200px;
text-align:center;
}
#con.show{
display:block;
}
#con .show{
display:block;
background:orange;
}
</style>
<script>
window.οnlοad=function(){//注意冒泡
var oLi=document.getElementsByTagName('li');
var oCon=document.getElementById('con');
var oDiv=oCon.getElementsByTagName('div');
var oUl=document.getElementById('list');
var oBox=document.getElementById('box');
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oUl.index=i;
oLi[i].οnmοuseenter=function(){//li的移入事件,添加class
for(var j=0;j<oLi.length;j++){
oLi[j].className='';//清空程序追加的每个li的class active
}
for(var k=0;k<oDiv.length;k++){
oDiv[k].className='';//清空程序追加的每个div的class show
}
oLi[this.index].className='active';//给当前li添加class active
oDiv[this.index].className='show';//给当前div添加class show
oCon.className='show';//给div所在父元素添加show
}
}
/*for(var j=0;j<oLi.length;j++){//当前div的移入事件,移入执行添加class操作
oDiv[j].οnmοuseenter=function(){
for(var k=0;k<oDiv.length;k++){
oDiv[k].className='';//清空程序追加的每个div的class show
}
this.className='show';//给当前div添加class show
oCon.className='show';//给div所在父元素添加show
}
}*/
/*for(var j=0;j<oLi.length;j++){//当前div的移出事件,移出执行remove class操作
oDiv[j].οnmοuseοut=function(){
for(var k=0;k<oDiv.length;k++){
oDiv[k].className='';
}
}
}*/
oBox.οnmοuseleave=function(){//给盒子父元素添加移出事件
for(var j=0;j<oDiv.length;j++){
oDiv[j].className='';//清空程序追加的每个div的class show
}
for(var i=0;i<oLi.length;i++){
oLi[i].className='';
}
oCon.className='';//清空程序追加的#con的class show
}
}
</script>
</head>
<body>
<div id="box">
<ul id="list">
<li><a href="###">1</a><span>></span></li>
<li><a href="###">2</a><span>></span></li>
<li><a href="###">3</a><span>></span></li>
<li><a href="###">4</a><span>></span></li>
<li><a href="###">5</a><span>></span></li>
<li><a href="###">6</a><span>></span></li>
<li><a href="###">7</a><span>></span></li>
<li><a href="###">8</a><span>></span></li>
<li><a href="###">9</a><span>></span></li>
<li><a href="###">10</a><span>></span></li>
<li><a href="###">11</a><span>></span></li>
<li><a href="###">12</a><span>></span></li>
</ul>
<div id="con">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</div>
</body>
</html>