javascript选项卡2

Posted 前端HL

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript选项卡2相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        button{ width: 40px; height: 30px; line-height: 30px; text-align:center;  }
        button.active{ background-color: yellow }
        .content{ width: 200px; height: 200px; border:2px solid red; display: none; }
    </style>
</head>
<body>
    <div class="wrapper">
        <button class="active">11</button>
        <button>2</button>
        <button>3</button>
        <div class="content" style="display:block">1111111111</div>
        <div class="content">222222222</div>
        <div class="content">3333</div>
    </div>
    <script type="text/javascript">
        var btn = document.getElementsByTagName(\'button\');
        var content = document.getElementsByClassName(\'content\');
        for (var i = 0; i < btn.length; i++) {
            //形成一个闭包
            (function(n){
                btn[n].onclick=function(){
                //清除同级元素的当前类
                for (var j = 0; j<btn.length; j++) {
                    btn[j].className = "";
                    content[j].style.display = "none";
                }
                //点击添加当前类
                this.className = "active";
                content[n].style.display = "block";
            }
            }(i))
        }
    </script>
</body>
</html>

效果图：

 

以上是关于javascript选项卡2的主要内容，如果未能解决你的问题，请参考以下文章

片段和活动之间没有传递值

从父片段到选项卡片段的接口侦听器不起作用

从 Activity 到特定选项卡/片段的按钮 OnClick

显示 ActionBar 选项卡的两个片段

如何在作为选项卡的 2 个片段之间共享视图模型

如何在每个导航选项卡的片段内创建 2 个片段