tab切换

最新推荐文章于 2024-09-17 13:42:29 发布

tianjingsha959

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量141

点赞数

文章标签： javascript css html5

本文链接：https://blog.csdn.net/tianjingsha959/article/details/107319174

版权

如题

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=chrome,chrome=1">
        <title>tab切换</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            .container{
                margin: 30px;
                width: 500px;
                border: 1px solid #000;
            }
            .title{
                display: flex;
                height: 50px;
                border-bottom: 1px solid #000;
            }
            .title li{
                flex: 1;
                text-align: center;
                line-height: 50px;
            }
            .title li.active{
                background-color: lightcoral;
            }
            .content li{
                display: none;
            }
            .container li.active{
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <ul class="title">
                <li class="active">火车票</li>
                <li>飞机票</li>
                <li>汽车票</li>
            </ul>
            <ul class="content">
                <li class="active">火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车火车</li>
                <li>汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车汽车</li>
                <li>飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机</li>
            </ul>
        </div>
        <script>
            let title = document.getElementsByClassName("title")[0]
            let content = document.getElementsByClassName("content")[0]

            let titlelist = title.children
            let contentlist = content.children
            
            for(let i = 0; i < titlelist.length; i++){
                let item = titlelist[i]
                item.onclick = () => {
                    let titleActive = title.getElementsByClassName('active')[0]
                    titleActive.classList.remove('active')
                    item.classList.add("active")
                    let contentActive = content.getElementsByClassName('active')[0]
                    contentActive.classList.remove('active')
                    contentlist[i].classList.add("active")
                }
            }
        </script>
    </body>
</html>