js基础-Tab切换_基础tab切换-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41670147/article/details/88720514

博客涉及tab切换相关内容，但具体信息缺失。tab切换在前端页面交互中较为常见，可用于展示不同内容模块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .nav {
            width: 400px;
        }
        .nav span {
            float: left;
            display: block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            background: lightyellow;
            text-align: center;
        }
        .nav span.current {
            background: green;
            color: #fff;
        }
        .list {
            clear: both;
        }
        .list p {
            width: 400px;
            height: 400px;
            background: green;
            display: none;
            text-align: center;
            line-height: 400px;
            color: #fff;
        }
        .list p.current {
            display: block;
        }
    </style>
</head>
<body>
<div class="box" id="box-list">
    <div class="nav">
        <span class="current">标题1</span>
        <span>标题2</span>
        <span>标题3</span>
        <span>标题4</span>
    </div>
    <div class="list">
        <p class="current">内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p>内容4</p>
    </div>
</div>
<script>
    var boxCont = document.getElementById("box-list");
    var navBt = boxCont.getElementsByTagName("div")[0];
    var listLs = boxCont.getElementsByTagName("div")[1];
    var spanObj = navBt.getElementsByTagName("span");
    var pObj = listLs.getElementsByTagName("p");

   for (var i=0; i<spanObj.length; i++){
       spanObj[i].setAttribute("index",i)
       spanObj[i].onclick=function () {
            for (var j=0; j<spanObj.length; j++){
                spanObj[j].removeAttribute("class")
            }
            this.className="current";
            var num=this.getAttribute("index");
            for (var k=0; k<pObj.length; k++){
                pObj[k].removeAttribute("class");
            }
            pObj[num].className="current";
       }
   }
</script>
</body>
</html>

在这里插入图片描述