欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

模拟京东侧边栏

程序员文章站 2022-05-11 09:12:27
...

思路:

// 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设置为none
    for (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为block
    items[num].style.display = 'block';
  };
}


// 3. 给类名为slide的div鼠标离开事件onmouseleave
slide.onmouseleave = function () { 
  // 3.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为none
  for (var j = 0; j < lis.length; j++) {
    lis[j].className = '';
    items[j].style.display = 'none';
  }
};

实现效果:

模拟京东侧边栏

注意:

右边栏模拟放的是图片,如有需求,后期可以修改html结构样式等,进行改变

相关标签: 前端网页小项目