js选项卡功能

最新推荐文章于 2022-04-06 13:13:52 发布

weixin_34259159

最新推荐文章于 2022-04-06 13:13:52 发布

阅读量94

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3759656/blog/3005827

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js选项卡功能</title>
    <style>
        .btn {
            width: 60px;
            hieght: 30px;
        }
 
        .content {
            width: 200px;
            height: 200px;
            border: 1px solid #b1b3b0;
            display: none;
        }
 
        .on {
            background: #2d64b3;
            color: #fff;
        }
 
    </style>
</head>
<body>
<button class="btn on">导航1</button>
<button class="btn">导航2</button>
<button class="btn">导航3</button>
<div class="content" style="display: block;">内容1</div>
<div class="content">内容2</div>
<div class="content">内容3</div>
</body>
<script>
    var btn = document.getElementsByTagName('button');
    var content = document.getElementsByClassName('content');
    for (var i = 0; i < btn.length; i++) {
        (function (n) {
            btn[i].onclick = function () {
                for (var j = 0; j < btn.length; j++) {
                    btn[j].className = "";
                    content[j].style.display = 'none'
                }
                this.className = "on";
                content[n].style.display = 'block'
            }
        }(i))
    }
</script>
</html>

转载于:https://my.oschina.net/u/3759656/blog/3005827