摘要：
很多孩子不知道什么时候要做推拉门。今天，他们分享了一个案例：下面的div需要制作一个滑动门效果按钮1按钮2按钮3内容1˂liname
很多小伙伴想做滑动门的时候没有思路，今天就分享一个案例：
下面这个div需要做滑动门效果
<div class="cont"> <ul> <li name="ulli" class="active">按钮1</li> <li name="ulli" >按钮2</li> <li name="ulli" >按钮3</li> </ul> <ol> <li name="olli" class="active">内容1</li> <li name="olli">内容2</li> <li name="olli">内容3</li> </ol> </div>
方法1循环遍历：
var ullis = document.querySelectorAll('ul li'); var ollis = document.querySelectorAll('ol li'); //ul进行循环遍历 ullis.forEach(function(item,key){ //给item标签添加点击函数 item.onclick = function(){ //让ol也进行循环遍历，不管第几次循环，class都为空 ollis.forEach(function(v,k){ v.className = ''; ollis[k].className = ''; }) //在ol循环同时，赋值给第key个item一个class标签，覆盖循环遍历的class标签 item.className = 'active'; //同时也给第key个ollis一个class标签，覆盖循环遍历的class标签 ollis[key].className = 'active'; } })
核心思路:
利用 ul 和 ol 中 li标签个数相同的 特点,优化程序,简化代码
1,获取标签对象
2,给所有的ul中的li标签,添加点击事件
3,点击事件执行的内容
(1),给所有的ul和ol中的li标签,清除样式
(2),给当前点击的ul中的li标签,添加样式
(3),给索引相同的ol中的li标签,添加样式
可以用自己的方式实现,比如多写几个循环,分别操作ul和ol中的标签
方法2事件委托：
var oDiv = document.querySelector('div'); var ullis = document.querySelectorAll('ul li'); var ollis = document.querySelectorAll('ol li'); //给父级div添加点击事件 oDiv.onclick = function(e){ //判断触发点击对象的标签如果有name属性为ulli，则表示点击的是ul标签中的li if(e.target.getAttribute('name') === 'ulli'){ //ul中li循环遍历，给所有的标签清除样式属性 ullis.forEach(function(item,key){ item.className = ''; ollis[key].className = ''; //并且给ul中的li标签定义属性 item.setAttribute('index',key); }) //给当前ul中的li添加样式 e.target.className = 'active'; //利用ul中li的index的值key给ol中对应的下标添加属性 ollis[e.target.getAttribute('index')].className = 'active'; } }
1、核心思想:
利用 按钮标签 与 内容标签 标签数量是一一对应的关系
通过点击 按钮标签 同时操作 对应的内容标签
2、基本步骤:
点击 按钮标签 时
（1）给所有的li标签,包括ul,ol中的所有li标签,清除class样式
（2）给当前点击的 按钮标签 添加样式
（3）给对应的 内容标签 添加样式
3、利用事件委托
（1）给父级div,添加事件委托
（2）判断点击 ul中的li时,执行程序
（3）给所有的li清除class样式标签
给点击的li添加class样式
给点击的li对应的ol中的li,添加class样式