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