思路：

// 1. 獲取元素 // 1.1 獲取一組li // 1.2 獲取一組類名為item的div // 1.3 獲取類名為slide的div// 2. 循環(huán)遍歷給每一個li注冊onmouseenter，并且每一個li添加一個index表示索引 // 2.1 循環(huán)遍歷把所有的li的類名設置為'',把所有的item的display設置為none // 2.2 讓當前的li突出顯示（加類名active） // 2.3 獲取到當前的li的編號（加的索引） // 2.4 通過編號找到對應的item項設置display為block// 3. 給類名為slide的div鼠標離開事件onmouseleave // 3.1 循環(huán)遍歷把所有的li的類名設置為'',把所有的item的display設置為none <!-- 版心 --><div class="w"><div class="slide"><!-- 左側(cè) --><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><!-- 右側(cè) --><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; }/* 左側(cè) */ .left {width: 200px;background: #fff;color: #ccc;position: absolute;}/* 左側(cè)的li */ .left ul li {padding-left: 20px;line-height: 30px;font-size: 14px;cursor: pointer; }/* 左側(cè)li被選中的樣式 */ .left ul li.active {background: rgba(153, 153, 153, 0.657); }/* 右側(cè)詳細菜單 */ .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. 循環(huán)遍歷給每一個li注冊onmouseenter，并且每一個li添加一個index表示索引 for (var i = 0; i < lis.length; i++) {lis[i].index = i;lis[i].onmouseenter = function () {// 2.1 循環(huán)遍歷把所有的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 循環(huán)遍歷把所有的li的類名設置為'',把所有的item的display設置為nonefor (var j = 0; j < lis.length; j++) {lis[j].className = '';items[j].style.display = 'none';} };

實現(xiàn)效果：

注意：

右邊欄模擬放的是圖片，如有需求，后期可以修改html結構樣式等，進行改變

總結

以上是生活随笔為你收集整理的模拟京东侧边栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。