模拟京东侧边栏

思路：

// 1. 获取元素
// 1.1 获取一组li
// 1.2 获取一组类名为item的div
// 1.3 获取类名为slide的div// 2. 循环遍历给每一个li注册onmouseenter，并且每一个li添加一个index表示索引
// 2.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为none
// 2.2 让当前的li突出显示（加类名active）
// 2.3 获取到当前的li的编号（加的索引）
// 2.4 通过编号找到对应的item项设置display为block// 3. 给类名为slide的div鼠标离开事件onmouseleave
// 3.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为none

  <!-- 版心 --><div class="w"><div class="slide"><!-- 左侧 --><div class="left"><ul><li><a href="#">主菜单项目1</a></li><li><a href="#">主菜单项目2</a></li><li><a href="#">主菜单项目3</a></li><li><a href="#">主菜单项目4</a></li><li><a href="#">主菜单项目5</a></li><li><a href="#">主菜单项目6</a></li><li><a href="#">主菜单项目7</a></li><li><a href="#">主菜单项目8</a></li><li><a href="#">主菜单项目9</a></li><li><a href="#">主菜单项目10</a></li><li><a href="#">主菜单项目11</a></li><li><a href="#">主菜单项目12</a></li><li><a href="#">主菜单项目13</a></li><li><a href="#">主菜单项目14</a></li><li><a href="#">主菜单项目15</a></li><li><a href="#">主菜单项目16</a></li></ul></div><!-- 右侧 --><div class="right"><div class="item"><img src="images/01.png"></div><div class="item"><img src="images/02.png"></div><div class="item"><img src="images/03.png"></div><div class="item"><img src="images/04.png"></div><div class="item"><img src="images/05.png"></div><div class="item"><img src="images/06.png"></div><div class="item"><img src="images/07.png"></div><div class="item"><img src="images/08.png"></div><div class="item"><img src="images/09.png"></div><div class="item"><img src="images/10.png"></div><div class="item"><img src="images/11.png"></div><div class="item"><img src="images/12.png"></div><div class="item"><img src="images/13.png"></div><div class="item"><img src="images/14.png"></div><div class="item"><img src="images/15.png"></div><div class="item"><img src="images/16.png"></div></div></div></div>

* {margin: 0;padding: 0;
}body {background: #ccc;
}ul {list-style: none;
}.w {width: 1200px;margin: 0 auto;
}a {color: #666;text-decoration: none;
}a:hover {color: red;
}.slide {position: relative;
}/* 左侧 */
.left {width: 200px;background: #fff;color: #ccc;position: absolute;}/* 左侧的li */
.left ul li {padding-left: 20px;line-height: 30px;font-size: 14px;cursor: pointer;
}/* 左侧li被选中的样式 */
.left ul li.active {background: rgba(153, 153, 153, 0.657);
}/* 右侧详细菜单 */
.right {position: absolute;left: 200px;
}.right .item {display: none;border-left: 1px solid #eee;}.right .item.active {display: block;
}

// 1. 获取元素
// 1.1 获取一组li
var lis = document.querySelectorAll('li');
// 1.2 获取一组类名为item的div
var items = document.querySelectorAll('.item');
// 1.3 获取类名为slide的div
var slide = document.querySelector('.slide');
// 2. 循环遍历给每一个li注册onmouseenter，并且每一个li添加一个index表示索引
for (var i = 0; i < lis.length; i++) {lis[i].index = i;lis[i].onmouseenter = function () {// 2.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为nonefor (var j = 0; j < lis.length; j++) {lis[j].className = '';items[j].style.display = 'none';}// 2.2 让当前的li突出显示（加类名active）this.className = 'active';// 2.3 获取到当前的li的编号（加的索引）var num = this.index;// 2.4 通过编号找到对应的item项设置display为blockitems[num].style.display = 'block';};
}// 3. 给类名为slide的div鼠标离开事件onmouseleave
slide.onmouseleave = function () { // 3.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为nonefor (var j = 0; j < lis.length; j++) {lis[j].className = '';items[j].style.display = 'none';}
};