京东三级菜单

最新推荐文章于 2023-04-01 10:04:31 发布

谁牵引了你的泪

最新推荐文章于 2023-04-01 10:04:31 发布

阅读量608

点赞数

分类专栏： javascript 文章标签：京东三级菜单

本文链接：https://blog.csdn.net/king_spunch/article/details/51779911

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>

谁牵引了你的泪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
京东三级菜单

京东二级菜单 *{ margin:0; padding:0; } #box{ margin:100px 0 0 300px; width:200px; height:492px; background:#ccc; position:rela
复制链接

扫一扫