tab切换

最新推荐文章于 2024-07-22 15:13:59 发布

栗同学

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量150

点赞数

分类专栏：案例文章标签： javascript css elementui vue.js

本文链接：https://blog.csdn.net/lizixuan2001/article/details/121685791

版权

HTML JavaScript 内容切换交互设计 DOM操作

关键词由CSDN通过智能技术生成

案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab切换</title>
    <style>
        .title dt{
            width: 150px;
            height: 50px;
            line-height: 50px;
            float: left;
            margin: 0px 1px;
            text-align: center;
            background-color: indianred;
        }
        .title::after{
            content: "";
            display: block;
            clear: both;
        }
        .content dt{
            line-height: 200px;
            width: 455px;
            height: 200px;
            text-align: center;
            background-color: rgb(195, 107, 230);
        }
        .content dt:nth-of-type(n+2){
            display: none;
        }

       
    </style>
</head>
<body>
    <dl class="title">
        <dt>标题一</dt>
        <dt>标题二</dt>
        <dt>标题三</dt>
    </dl>
    <dl class="content">
        <dt>内容一</dt>
        <dt>内容二</dt>
        <dt>内容三</dt>
    </dl>
</body>
</html>
<script>
    var titleList = document.querySelector(".title").children
    var contentList = document.querySelector(".content").children
    for(let i = 0;i<titleList.length;i++){
        titleList[i].onclick = function(){
            for(var j = 0;j<titleList.length;j++){
                contentList[j].style.display = "none"
                // if(titleList[j] == this){
               
                // }
            }
            contentList[i].style.display = "block"
        }
    }
</script>

栗同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ta.
复制链接

扫一扫