选项卡---简单演示

最新推荐文章于 2024-07-15 13:17:25 发布

洛洛_0-0

最新推荐文章于 2024-07-15 13:17:25 发布

阅读量65

点赞数 5

文章标签： html 前端 java

本文链接：https://blog.csdn.net/m0_59791864/article/details/126754751

版权

效果：

效果介绍：这三个之间可以进行切换，下面内容也可以切换

html部分：

<div id="box" class="tab">
        <div class="titles">
            <span class="active">要闻</span>
            <span>济南新闻</span>
            <span>军事航空</span>
        </div>
        <div class="contents">
            <div class="active">要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容要闻内容</div>
            <div>济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容济南新闻内容</div>
            <div>军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容军事航空内容</div>
        </div>
    </div>

css部分：

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab{
            width: 500px;
            height: 600px;
            margin: 0 auto;
            background-color: #ccc;
        }
        .tab .titles{
            height: 100px;
            display: flex;
        }
        .tab .titles span{
            flex:1;
            line-height: 100px;
            font-size: 30px;
            text-align: center;
        }
        .tab .titles span.active{
            color: red;
        }
        .tab .contents{
            height: 500px;
            position: relative;
        }
        .tab .contents div{
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .tab .contents div.active{
            display: block;
        }
    </style>

js部分：

 <script>
        var titles=document.querySelectorAll(".titles span");
        var contents=document.querySelectorAll(".contents div");
        for(let i=0;i<titles.length;i++){
            titles[i].onclick=function(){
                for(var j = 0;j < titles.length;j++){
                    titles[j].className="";
                }
                titles[i].className="active";
                for(var j=0;j<contents.length;j++){
                    contents[j].className="";
                }
                contents[i].className="active";
            }
        }
    </script>