单击时使用Javascript显示/隐藏div

我试图在单击时仅使用Javascript显示/隐藏选项卡，但我得到了错误（“UncaughtTypeError:无法设置未定义选项卡的属性“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>

a{文本装饰：无；}
li{列表样式：无；}
li.selected{font-weight:bold；}
.panels div{display:none；}
.panels.selected{display:block；}





这是第一小组。
这是第二小组。
这是第三小组。
var tabs=document.getElementById（“tabs”）.getElementsByTagName（“li”）；
var panels=document.getElementById（“panels”）.getElementsByTagName（“div”）；
对于（变量i=0；i

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

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

尝试：

var tabs=document.getElementById（“tabs”）.getElementsByTagName（“li”）；
var panels=document.getElementById（“panels”）.getElementsByTagName（“div”）；
对于（变量i=0；i

正如您所期待的，下面的内容将起作用。在访问for循环中的HTML元素时，我发现了两个问题，您需要使用.item（）作为获取的HTMLCollection，而不是数组。此外，您的内部for循环需要使用不同的循环索引，另外一个if条件是保持单击状态，如图所示，其余部分隐藏

<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.item(i).className = panels.item(i).className = "selected";
                for (var j = 0; j < panels.length; j++) {
                    if(i!=j){
                        tabs.item(j).className = panels.item(j).className = "";
                    }
                }
            }
        }(i);
    }
</script>

a{文本装饰：无；}
li{列表样式：无；}
li.selected{font-weight:bold；}
.panels div{display:none；}
.panels.selected{display:block；}





这是第一小组。
这是第二小组。
这是第三小组。
var tabs=document.getElementById（“tabs”）.getElementsByTagName（“li”）；
var panels=document.getElementById（“panels”）.getElementsByTagName（“div”）；
对于（变量i=0；i

您有几个问题：

• 多个

  i

  变量

• 新函数（i）{…}

  不是最好的语法。我在下面使用了一个闭包
• 每行多个作业不好

我已经给了您的

元素值，这样我们就可以知道单击了哪个li元素

var tabs=document.getElementById（“tabs”）.getElementsByTagName（“li”）；
var panels=document.getElementById（“panels”）.getElementsByTagName（“div”）；
对于（变量i=0；i

a{文本装饰：无；}
li{列表样式：无；}
li.selected{font-weight:bold；}
.panels div{display:none；}
.panels.selected{display:block；}

这是第一小组。
这是第二小组。
这是第三小组。

也许你想试试Jquery..这就是我需要的。。。谢谢我已经修改了变量以修复冲突，但出于某种原因，我没有考虑在运行“for循环”后添加类。

<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.item(i).className = panels.item(i).className = "selected";
                for (var j = 0; j < panels.length; j++) {
                    if(i!=j){
                        tabs.item(j).className = panels.item(j).className = "";
                    }
                }
            }
        }(i);
    }
</script>