Отображение/скрытие Divs с Javascript при щелчке

Question

Я пытаюсь показать/скрыть вкладки при нажатии, используя только Javascript, но я получаю ошибки («Uncaught TypeError: Невозможно установить свойство« className »неопределенных вкладок. (Анонимная функция) .по щелчку"). Может кто-нибудь дать мне представление о том, что может быть проблема?

<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, которая конфликтует с переменной outter для цикла с тем же именем.

Вы должны также удалить выбранный класс из всех элементов, прежде чем устанавливать выбранный элемент «selected».

Try:

<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

Ниже здесь будет работать, как вы ожидаете. Две проблемы, которые я нашел для доступа к элементу 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

У вас есть несколько проблем:

• Multiple i переменных
• new function(i) {...} не лучший синтаксис. Я использовал закрытие ниже
• нескольких заданий на линии не является хорошим

Я дал свои <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>