Tab栏切换

1.将tab栏分为上下两部分，上面是导航栏，下面是各部分对应的内容。

2.tab栏导航栏部分，点击后样式改变，比如字体颜色、背景颜色改变

①定义一个类名：current，改变后的样式，先给第一个写该类名，其他的不写类名
②js获取所有对象，利用for循环遍历给每个对象绑定点击事件,并且设置属性index
③排他算法：利用for循环将所有对象设置类名为空，被点击的对象设置类名current
3.点击不同对象，出现不同的内容

①定义一个类名：items，其他的都隐藏起来
②获取全部对象，获取点击对象的索引号，在点击事件里再添加一个排他思想：利用for循环将所有内容设置隐藏，将对应的索引号的内容显示

html代码：

<div class="tab">

        <div class="tab-head">

            <ul>

                <li class="current"><a href="javasript:;" >

电视剧

                </a></li>

                <li><a href="javasript:;">

             新闻      

                </a></li>

                <li><a href="javasript:;">

                 电影  

                </a></li>

                <li><a href="javasript:;">

                综艺    

                </a></li>

            </ul>

        </div>

        <div class="tab-content">

<div class="items"> 我是电视剧模块</div>

<div> 我是新闻模块</div>

<div> 我是电影模块</div>

<div> 我是综艺模块</div>

        </div>

    </div>

css代码：

<style>

        *{

            /* 初始化 */

            margin:0;

            padding:0;

            box-sizing: border-box;

        }

        body{

            /* 视口高度 */

            height: 100vh;

            /* flex布局 */

            display: flex;

            justify-content: center;

            align-items: center;

        }

        ul{

            /* 去除小圆点 */

            list-style: none;

        }

        .tab{

            width: 250px;

            height: 200px;

            border:2px solid #ccc;

        }

        .tab-head ul{

            display: flex;

       

        }

        .tab-head ul li{

            display: flex;

            align-items: center;

        justify-content: center;

            height: 40px;

            /* 各占一份 */

            flex:1;

        }

        .tab-head ul li a{

            text-decoration: none;

            color:black

        }

        .current{

            color:#fff;

            background-color: red;

        }

        .current a{

            color:#fff!important;

        }

       

        .tab-content div{

            /* 其余隐藏 */

            display: none;

        }

        .tab-content .items

        {

            /* 第一个显示 */

            display: block;

        }

    </style>

 

js代码：

<script>

        // 获得所有的li

        var lis=document.querySelectorAll('li');

        // 获得.tab-content

        var tab_content=document.querySelector('.tab-content');

        // 获得.tab-content的子元素节点

        var item=tab_content.children;

 

        // 给所有的li绑定点击事件

        for(var i=0;i<lis.length;i++)

        {

            // 给所有li添加索引号

            lis[i].setAttribute('index',i);

       

            lis[i].addEventListener('click',function()

            {

                for(var i=0;i<lis.length;i++)

                {

                    // 移除所有li的类名

                    lis[i].className='';

                    // 移除所有.tab-content的子元素节点的类名

                    item[i].className='';

                }

                // 被点击的li添加current类名

                this.className='current';

                // 获得被点击li的索引号

                var index=this.getAttribute('index');

                item[index].className='items';

            })

        }

       

    </script>