js选项卡的简单功能实现

js选项卡的简单功能实现

首先在html中写出基本结构

  <ul>
        <li style=" background-color: red;">aa 
            <div style="display: block; background-color: red;" >111div>//默认显示的div
        li>
        <li>bb
            <div style="background-color: yellow;">222div>
        li>
        <li>cc
            <div style=" background-color: green;">333div>
        li>
    ul>

然后在css中写样式

     *{
            margin: 0;
            padding: 0;
        }//清除网页内置边距
        ul  {
            list-style: none;
            position: relative;
        }
        
        li {
            float: left;
            background-color: #999;
            width: 100px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            border: 1px solid black;
            border-collapse: collapse;
            
        }
        div{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 35px;
            display: none;
        }//隐藏div
  

下面是这个功能的js部分，也是主要部分；

    <script>

        var lis=document.querySelectorAll('li');//找到li元素
        for(i=0;i<lis.length;i++){
            lis[i].addEventListener('click',  function(){
            	//这个for循环时把所有的div设置隐藏并把li元素的颜色重置
                for (var j = 0; j < lis.length; j++) {
                       lis[j].children[0].style.display = 'none';//使div隐藏
                       lis[j].style.backgroundColor='#999';//重置li元素颜色
                    }
                  //找到点击这个li元素的div背景颜色
                var clo=window.getComputedStyle(this.children[0],null).backgroundColor;
                this.style.backgroundColor=clo;//点击时设置li元素的颜色
               this.children[0].style.display='block';//点击使div出现
            },false);  
        } 
    </script>

主要思路为先在css中把其中俩个div用display：none；给隐藏起来，设置一个默认显示的div，之后再在js中用querySelectorAll()方法找到html界面中的li标签元素；然后用for循环遍历每一个li元素，在每一个li元素上添加一个鼠标点击事件，在点击事件绑定的函数中设置一个循环先把所有的div也就是li元素的第一个孩子节点设置一个样式隐藏起来；之后在循环外面把点击的那个li元素下的div设置显示的样式。这样就能实现一个简单的选项卡功能。

效果图

ps：样式很菜请忽略；