javascript - 单击时使用 Javascript 显示/隐藏 Div

Question

我试图仅使用 Javascript 在单击时显示/隐藏选项卡，但出现错误(“未捕获的类型错误:无法设置未定义选项卡的属性“className”。(匿名函数).onclick”)。有人可以告诉我问题可能是什么吗？

<style>
    a { text-decoration: none; }
    li { list-style: none; }
    li.selected { font-weight: bold; } 
    .panels div { display: none; }
    .panels .selected { display: block; }
</style>

<div id="tabs" class="tabs">
    <ul>
        <li class="selected"><a href="javascript:;">One</a></li>
        <li class=""><a href="javascript:;">Two</a></li>
        <li class=""><a href="javascript:;">Three</a></li>
    </ul>
</div>

<div id="panels" class="panels">
    <div class="selected">This is panel one.</div>
    <div class="">This is panel two.</div>
    <div class="">This is panel three.</div>
</div>

<script>
    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    var panels = document.getElementById("panels").getElementsByTagName("div");
    for (var i = 0; i < tabs.length; i++) {
        new function(i) {
            tabs[i].onclick = function() {
                tabs[i].className = panels[i].className = "selected";
                for (var i = 0; i < panels.length; i++) {
                tabs[i].className = panels[i].className = "";
                }
            }
        }(i);
    }
</script>

Answer 1

内部 for 循环有一个 i 变量，该变量与同名的外部变量 for 循环冲突。

在将单击的元素设置为“选定”之前，您还应该从所有元素中删除选定的类。

尝试:

<script>
    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    var panels = document.getElementById("panels").getElementsByTagName("div");
    for (var i = 0; i < tabs.length; i++) {
        new function(i) {
            tabs[i].onclick = function() {
                for (var j = 0; j < panels.length; j++) {
                    tabs[j].className = panels[j].className = "";
                }
                tabs[i].className = panels[i].className = "selected";
            }
        }(i);
    }
</script>