js中滑动门的实现方法和案例

很多小伙伴想做滑动门的时候没有思路，今天就分享一个案例：

下面这个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样式