js原生选项卡 Dom部分

什么是dom ：
　　1. DOM ======> Document Object Model
　　2. Dom定义了表示和修改文档所需要的方法。
　　Dom对象即为宿主对象，有浏览器厂商定义，
　　用来操作html和xml功能的一类对象集合。
　　也有人称DOM是对html以及xml的标准编程接口。

原生js选项:

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--css部分-->
 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            padding-top: 20px;
            box-sizing: border-box;
            margin: 0 auto;
            width: 50pz;
            height: 40vw;
            background: #f00;
        }

        .wrap div {
            width: 100%;
            height: 90%;
            margin-top: 20px;
            background: #000;
            font-size: 100px;
            color: #fff;
            display: none;
        }

        .active {
            color: #00f;
            background-color: #fff;
        }

        button:first-of-type {
            margin-left: 15px;
        }

        button {
            width: 30%;
            height: 30px;
            border-radius: 5px;
            border: 0;
            outline: none;
            color: #fff;
            background: #00f;
        }
    </style>
</head>
<body>
<!--html部分-->
    <div class="wrap" id="wrap">
        <button type="button" class="active">1</button>
        <button type="button">2</button>
        <button type="button">3</button>
        <div class="div1" style="display: block;">1</div>
        <div>2</div>
        <div>3</div>
    </div>
<!--js部分-->
<script>
　　var oBtn = document.getElementsByTagName("button"); //获取点击按钮    
　　var oWrap = document.getElementById("wrap");  //获取大容器
　　var oBox = oWrap.getElementsByTagName("div"); //获取内容部分div

　　//遍历 按钮 
　　for (var i = 0; i < oBtn.length; i++) {

　　　　//立即执行函数
　　　　(function (i) {

　　　　　　//要点击的按钮
　　　　　　oBtn[i].onclick = function () {

　　　　　　　　//遍历没有点击的按钮
　　　　　　　　for (var j = 0; j < oBtn.length; j++) {

　　　　　　　　　　//让没有点击的按钮的class类名为空
　　　　　　　　　　oBtn[j].className = "";

　　　　　　　　　　//让所有第div都隐藏
　　　　　　　　　　oBox[j].style.display = "none";
　　　　　　　　}

　　　　　　　　//让需要点击的按钮添加类名 active 
　　　　　　　　this.className = "active";

　　　　　　　　//让相对应的div显示
　　　　　　　　oBox[i].style.display = "block"
　　　　　　}
　　　　}(i)) // 将 i 传到函数中
　　}
</script>


</body>
</html>

来源：CSDN

作者：巷陌i

链接：https://blog.csdn.net/lzDevastator/article/details/104544543

标签

按钮

dom

选项卡

dom对象