Table选项卡

最新推荐文章于 2024-04-24 09:22:16 发布

qian96

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量205

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qian96/article/details/109301258

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

qian96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Table选项卡

Table选项卡方法一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table选项卡</title> <style> div{ width: 200px; height: 200px; display: none;
复制链接

扫一扫