用Javascript点击显示/隐藏Div点击

Question

我试图用Javascript显示/隐藏点击标签，但我得到错误（“Uncaught TypeError：无法设置未定义标签的属性'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循环有一个变量与外部变量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> 

Answer 2

下面将在这里工作，因为你期望。我在for循环中访问HTML Element时发现了两个问题，您需要使用.item（）作为其获取的HTMLCollection而不是数组。此外，您的内循环需要使用不同的循环索引，如果需要另外添加一个条件，请单击一个，如图所示，其余部分隐藏。

<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> 

Answer 3

你有几个问题：

• 多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>