2019-08-17

tab切换-选项卡

html

       

           

• 电影票1

           

• 电影票2

           

• 电影票3

           

• 电影票4

       

       

           

• 动物世界

           

• 怦然星动

           

• 栀子花开

           

• 老炮儿

       

   

js

var titles = document.getElementsByClassName('titles')[0].children

        var contents=document.getElementsByClassName('contents')[0].children

        contents[0].style.display='block'

        for (let i = 0; i < titles.length; i++) {

            titles[i].onclick = function () {

                var active = document.getElementsByClassName('active')[0]

                active.classList.remove('active')

                this.classList.add('active')

                for (let j = 0; j < contents.length; j++) {

                    contents[j].style.display='none'

                }

                contents[i].style.display='block'

            }

        }

css

.big {

            width: 400px;

            height: 300px;

            border: 1px solid blue;

            margin: 100px auto;

        }

        .titles {

            height: 50px;

            border-bottom: 1px solid gray;

            display: flex;

            text-align: center;

        }

        .titles li {

            flex: 1;

            line-height: 50px;

            cursor: pointer;

        }

        .titles li.active {

            background: skyblue;

        }

        .contents li {

            display: none;

        }