选项卡（js原生，数组map（））

不多说,直接上效果和代码：

图片：

此选项卡就是点击响应的tab,就会显示响应的内容

Css:

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        .tabBox{
            margin: 20px auto;
            width: 500px;
        }
        .tabBox ul{
            position: relative;
            top:1px;
        }
        .tabBox ul li{
            display: inline-block;
            padding: 0 5px;
            margin-right: 10px;
            border: 1px solid #aaaaaa;
            cursor: pointer;
            line-height: 33px;
        }
        .tabBox ul li.active{
            border-bottom-color: #ffffff;
            font-weight: bold;
            color: aqua
        }
        .tabBox div{
           display: none;
            line-height: 248px;
            text-align: center;
            border:1px solid #aaaaaa;
        }
        .tabBox div.active{
            display: block;
            
        }
    </style>

HTML：

 <div class="tabBox" id="tabBox">
       <ul>
           <li class="active">读书</li>
           <li>电影</li>
           <li>音乐</li>
       </ul>
       <div class="active">爱读书</div>
       <div>爱电影</div>
       <div>爱音乐</div>
   </div>

JS:

  //获取需要操作的元素
    var tabBox=document.getElementById('tabBox');
    var tabList=tabBox.getElementsByTagName('li')
    var divList=tabBox.getElementsByTagName('div')
    console.log( Array.from(tabList))
    console.log( Array.from(divList))
    Array.from(tabList).map((item,index)=>{//Array.from()类数组转数组后遍历Li
        Array.from(divList).map((divItem,divIndex)=>{//同上遍历div
            index==divIndex?item.onclick=()=>{//判断Li.index是否等于div.index 相等的话为tab添加点击事件
                item.className="active";//为相对应的item 添加类名active
                divItem.className="active"//同上
                var secondLi = item.parentNode.children //获取li的父节点  父节点是ul 获取后ul是类数组
                Array.from(secondLi).map((secondtt,secondIndex)=>{//第二次类数组转数组再次遍历li
                    index!==secondIndex?secondtt.className='':''//除了点击的li，其他兄弟元素删除active
                })  
                Array.from(divList).map((secondDiv,secondDivIndex)=>{//第二次类数组转数组再次遍历div
                    index!==secondDivIndex?secondDiv.className="":''//div   的其他兄弟元素删除active
                })
                
            }:''
        })
    })

此文章是一个简单的小demo，看其他人都是用for循环写的，我就想用别的方式也试试。就写了这个。希望能对你们带来帮助。这也是我的第一篇简书文章。希望自己再接再厉