侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940

侧边栏式例

上图所示

1. 获取所有的li标签，先实现鼠标放上去改变背景颜色
2. 然后鼠标放到对应的li标签，显示对应的内容
3. 代码实现

      methods:{
          getclass(){
       			//侧边栏内容
            var classArr = document.querySelector('.inner').children
               //鼠标放侧边栏显示对应的内容区域
            var rightArr = document.querySelector('.right-arr').children
            //最外边的大盒子
            var bannersidebar = document.querySelector('.banner-sidebar')
            for (var i=0;i<classArr.length;i++){
              const index=i
              rightArr[index].style.display='none'
                classArr[index].onmousemove=()=>{
                  bannersidebar.onmousemove=()=>{
                    console.log(index);
                    rightArr[index].style.display='block'
                  }
                  }
                classArr[index].onmouseout=()=>{
                  bannersidebar.onmouseout=()=>{
                      rightArr[index].style.display='none'
                  }
                }
            }
          }
      },

4. 上面的过程很简单看着但是思路是最重要的

5. 我需要实现什么功能
6. 我鼠标放上去需要实现什么功能
7. 实现功能的时候，需要解决什么？
8. 我这个侧边栏需要解决的就是如何把两个li标签绑定起来 这里我在for循环外部外部定义一个变量用来绑定li标签
 const index=i 这个index确保绑定对应的li标签