2020-10-26

Table选项卡
方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table选项卡</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            display: none;
            border: 1px solid red;
            float: left;
        }
    </style>
</head>
<body>
    <button style="background: red" data-index="0">aaa</button>
    <button data-index="1">bbb</button>
    <button data-index="2">ccc</button>
    <div style="display: block">a的内容</div>
    <div>b的内容</div>
    <div>c的内容</div>
</body>
</html>
<script>
    //获取按钮和div
    var oBtn=document.getElementsByTagName('button');
    var oDiv=document.getElementsByTagName('div');
    //点击函数循环3次
    for(var i=0;i<3;i++){
        oBtn[i].οnclick=function () {
            for(var j=0;j<3;j++){
                //所有按钮的背景样式为‘’
                oBtn[j].style.background='';
                //当前点击的按钮样式背景颜色为红色
                this.style.background='red';
            }
            for(var k=0;k<3;k++){
                //所有div隐藏
                oDiv[k].style.display='none';
                //当前按钮对应的div显示
                oDiv[this.dataset.index].style.display='block';
            }
        }

    }
</script>

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table选项卡2</title>
    <style>
        button.active{
            background-color: red;
        }
        div.active{
            display: block;
        }
        div{
            width: 200px;
            height: 200px;
            float: left;
            display: none;
            background-color: red;
        }
    </style>
</head>
<body>
    <button class="active">aaa</button>
    <button>bbb</button>
    <button>ccc</button>
    <div class="active">a的内容</div>
    <div>b的内容</div>
    <div>c的内容</div>
</body>
</html>
<script>
    var oBtn=document.getElementsByTagName('button');
    var oDiv=document.getElementsByTagName('div');

    for(var i=0;i<3;i++){
    (function (index) {
            oBtn[i].οnmοuseοver=function () {
                for(var k=0;k<3;k++){
                    oBtn[k].className='';
                    oDiv[k].className='';
                }
                this.className='active';
                oDiv[index].className='active';
            };
    })(i);
    }
</script>
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页