单击时使用 Javascript 显示/隐藏 Div答案

【问题标题】：Showing/Hiding Divs with Javascript on click单击时使用 Javascript 显示/隐藏 Div
【发布时间】：2014-11-07 02:08:58
【问题描述】：

我正在尝试仅使用 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>

【问题讨论】：

也许你想试试 Jquery..

标签： javascript

【解决方案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>

【讨论】：

这正是我所需要的……谢谢。我已经尽可能地更改变量以解决冲突，但由于某种原因，我没有想到在运行“for循环”后添加类。

【解决方案2】：

你有几个问题：

多个i变量
new function(i) {...} 不是最好的语法。我在下面使用了一个闭包
每行多个分配不好

我已经为你的<li> 元素提供了值，这样我们就可以知道点击了哪个 li 元素

    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    var panels = document.getElementById("panels").getElementsByTagName("div");
    for (var i = 0; i < panels.length; i++) {
      (function(i) {
        tabs[i].onclick = function() {
          var j;
          var panelIndex;
          
          // remove styles from other tabs
          for (j = 0; j < tabs.length; j++) {
            tabs[j].className = "";
          }
          
          // apply style to the current tab: 'this'
          this.className = "selected";
          

          // hide other panels
          for (j = 0; j < panels.length; j++) {
            panels[j].className = "";
          }
          
          // show the selected panel
          panelIndex = +this.value;  // convert value to number
          
          panels[panelIndex-1].className="selected"; // arrays are 0-indexed, so subtract 1

        }
      })(i);
    }

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

<div id="tabs" class="tabs">
    <ul>
        <li value="1" class="selected"><a href="javascript:;">One</a></li>
        <li value="2" class=""><a href="javascript:;">Two</a></li>
        <li value="3" 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>

【讨论】：

【解决方案3】：

正如您所期望的那样，以下内容将起作用。我在 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>

【讨论】：