Скрыть и показать элементы, нажав на ссылку с Java Script без JQuery

Question

Мне очень нужна помощь, я хочу знать, как лучше всего скрыть и показать элементы, щелкнув ссылку, используя Java Script без JQuery.

Итак, когда я нажимаю на ссылку «1», нужно добавить «класс активен», и нужно показывать только «<div id="cont1">», а остальные должны быть скрыты.

Другое дело, это сделать с возможностью добавления дополнительных HTML-ссылок и контента в будущем без необходимости изменения кода JS.

Я буду вечно благодарен, если кто-нибудь поможет мне!

Следуйте HTML код:

 <div class="all"> 
      <ul class="links"> 
      <li class="active"><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
      </ul> 
      <div class="content"> 
      <div id="cont1"> 
       <p>Content 1</p> 
      </div> 
      <div id="cont2"> 
       <p>Content 2</p> 
      </div> 
      <div id="cont3"> 
       <p>Content 3</p> 
      </div> 
      <div id="cont4"> 
       <p>Content 4</p> 
      </div> 
      </div> 
     </div> 

Answer 1

Просто попробуйте исправить код.

1. добавить недостающую [0] после document.getElementsByClassName("content")
2. изменения getElementsByClassName() к querySelectorAll() для того, чтобы работать в IE8
3. переменных изменений i в navList.children[i].onclick, чтобы помнить, переменная index
4. изменение переменной i начального значения для 0
5. прохода index + 1 как dest mudaConteudo() с начала индекса w Ith 0, но ваши идентификаторы контента начинаются с 1

Вот результат:

window.onload = function() { 
    function mudaConteudo(elm, dest) { 
     var divs = document.querySelectorAll(".content")[0].getElementsByTagName('div'); 
     for (var i = 0, len = divs.length; i < len; i++) { 
      divs[i].style.display = "none"; 
     } 
     document.getElementById('cont' + dest).style.display = "block"; 
    } 
    var navList = document.querySelectorAll(".links")[0]; 
    for (var i = 0, len = navList.children.length; i < len; i++) { 
     (function(index){ 
      navList.children[index].onclick = function() { 
       mudaConteudo(this, index + 1); 
       document.querySelectorAll(".active")[0].removeAttribute("class"); 
       this.className = "active"; 
      }; 
     })(i); 
    } 
} 

Надежда эта помощь.

Answer 2

Попробуйте это:

var list = document.getElementsByTagName('ul'); 
var links = list[0].getElementsByTagName('a'); 
for (var i = 0; i < links.length; i++) { 
    links[i].onclick = function() { 
     var target = this.innerHTML.substr(-1); 
     var divs = document.getElementsByClassName("content"); 
     var subdivs = divs[0].getElementsByTagName('div'); 
     for (var i = 0; i < subdivs.length; i++) subdivs[i].style.display = 'none'; 
     document.getElementById('cont' + target).style.display = 'block'; 
    }; 
}; 

jsFiddle example