用原生js写出一个点击按钮变换出对应的东西（选项卡功能）。

本文链接：https://blog.csdn.net/qq_43923146/article/details/107417370

用原生js写出一个点击按钮变换出对应的东西（选项卡功能）。

话不多说，直接先上效果图：
效果图1
效果图2
html代码：

<style>
        #bigbox {
            width: 500px;
            height: 400px;
            border: 2px solid green;
            box-sizing: border-box;
        }

        #bigbox img {
            width: 100%;
            height: 336px;
        }

        #boxtop {
            width: 100%;
            height: 60px;
            display: flex;
            box-sizing: border-box;
        }

        #boxtop span {
            width: 100px;
            height: 100%;
            text-align: center;
            line-height: 60px;
            border: 2px solid yellowgreen;
            box-sizing: border-box;
            background-color: gray;
        }
    </style>

<body>
    <p>1、选项卡</p>
    <div id="bigbox">
        <div id="boxtop">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <img src="img/0.png" id="imgs">
    </div>
</body>

javascript代码：

<script>
    let oSpan=document.querySelectorAll("span");
    let imgs = document.getElementById("imgs");
    for (let i = 0; i < oSpan.length; i++) {       //遍历所有按钮（span）
        oSpan[i].onclick = function() {     //点击哪个按钮让哪个按钮做出相应操作
            for(let j=0;j<oSpan.length;j++){  //遍历除过当前点击的按钮
                oSpan[j].style.backgroundColor = "gray";  //让除过当前按钮的其他按钮变回原来的颜色（灰色）
            }
        this.style.backgroundColor = "pink";  //让当前点击的按钮变为粉色
        imgs.src="img/" + i  + ".png";  //根据当前的下标值变换图片的地址
        }  
    } 
</script>