侧边栏实现思路

爱被打了一巴掌 2022-01-22 08:27 393阅读 0赞

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

## 侧边栏式例 ##

![在这里插入图片描述][20190605171854957.gif]

### 上图所示 ###

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'
                      }
                    }
                }
              }
          },

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

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

[20190605171854957.gif]: /images/20220122/a8d763715db84c3899899d3de7a9a426.png