三行原生js教你写出好看的手风琴特效选项卡！

html

<ul>
    <li class="active"><p>1</p><img src="img/10.jpg"></li>
    <li><p>2</p><img src="img/4.jpg"></li>
    <li><p>3</p><img src="img/6.jpg"></li>
    <li><p>4</p><img src="img/7.jpg"></li>
    <li><p>5</p><img src="img/9.jpg"></li>
</ul>

css

  *{
            margin: 0;
            padding: 0;
            transition: all .5s linear 0s;
        }
        li{list-style: none}
        ul{
            margin: 50px auto;
            width: 800px;
            height: 250px;
            display: flex;
        }
        ul>li{
            display: flex;
            cursor:pointer;
        }
        ul>li>p{
            height: 100%;
            width: 100px;
            line-height: 250px;
            font-size: 100px;
            text-align: center;
            border-right: 1px solid #aaa;
            background-color: #5f96d5;
        }
        ul>li>img{
            width: 0;
            height: 100%;
        }
        ul>li.active img{
            width: 300px;
        }

js

 //获取所有li
    let lis=document.querySelectorAll('ul>li');
    //循环绑定单击事件
    [].forEach.call(lis,item=>{item.onclick=function () {
            //单击时先全部清除active类
            [].forEach.call(lis,item=>{item.classList.remove('active')});
            //为单击元素添加active类
            this.classList.add('active');
        }
    })