クリックしたリンクに基づいてdivを切り替える - 普通のjavascript

Question

クリックしたリンクと外部addEventListenerでdivを切り替えるための非jqueryソリューションを探しています。 私は基本的にそれを達成するために最善を尽くしましたが、今は失われています。 誰もこの問題を解決する方法を知っていますか？

私のHTMLコード：

<a href="#" class="switch-button" data-id="switch1">Div1</a> 
<a href="#" class="switch-button" data-id="switch2">Div2</a> 
<a href="#" class="switch-button" data-id="switch3">Div3</a> 
<a href="#" class="switch-button" data-id="switch4">Div4</a> 
<div class="switch" id="switch1" style="height: 200px; width: 200px; background: blue;"></div> 
<div class="switch" id="switch2" style="height: 200px; width: 200px; background: red; display: none;"></div> 
<div class="switch" id="switch3" style="height: 200px; width: 200px; background: green; display: none;"></div> 
<div class="switch" id="switch4" style="height: 200px; width: 200px; background: yellow; display: none;"></div> 

私は基本的にこの

window.onload = function toggleDiv(){ 
      var buttons = document.getElementsByClassName('switch-button'); 
      var divs = document.getElementsByClassName('switch'); 

      for(i=0; i<buttons.length; i++){ 
       buttons[i].addEventListener('click', function(){ 
        for(j=0; j<divs.length; j++){ 
         divs[j].style.display = 'none'; 
        } 
        for(i=0; i<buttons.length; i++){ 
         var dataID = buttons[i].getAttribute('data-id'); 
         document.getElementById(dataID).style.display = 'block'; 
        } 

       }) 
      } 
     } 

のようなものに、この

$('.news-toggle').click(function (e) { 
    var thisDataId = $(this).attr('data-id'); 
    $('.news-toggle-box').fadeOut(300); 
    $('#' + thisDataId).delay(300).fadeIn(300); 
    e.preventDefault(); 
}); 

を変換しようとしていますが、それは正しく動作しません。

おかげで、あなたのアドバイスのためにたくさん;）

Answer 1

のjQueryを翻訳しても隠ぺいのためclass ESを使用して<div>示す試してみてください。

var sb = document.querySelectorAll('.switch-button'); 
 
var ntb = document.querySelectorAll('.switch'); 
 
for (i = 0; i < ntb.length; i++) 
 
    ntb[i].classList.add("hidden"); 
 
for (i = 0; i < sb.length; i++) 
 
    sb[i].onclick = function() { 
 
    var thisDataId = this.getAttribute('data-id'); 
 
    (function (thisDataId) { 
 
     var ntb = document.querySelectorAll('.switch'); 
 
     for (i = 0; i < ntb.length; i++) 
 
     ntb[i].classList.add("hidden"); 
 
     document.querySelector("#" + thisDataId).classList.remove("hidden"); 
 
    })(thisDataId); 
 
    return false; 
 
    }

.hidden {display: none;}

<a href="#" class="switch-button" data-id="switch1">Div1</a> 
 
<a href="#" class="switch-button" data-id="switch2">Div2</a> 
 
<a href="#" class="switch-button" data-id="switch3">Div3</a> 
 
<a href="#" class="switch-button" data-id="switch4">Div4</a> 
 
<div class="switch" id="switch1" style="height: 200px; width: 200px; background: blue;"></div> 
 
<div class="switch" id="switch2" style="height: 200px; width: 200px; background: red;"></div> 
 
<div class="switch" id="switch3" style="height: 200px; width: 200px; background: green;"></div> 
 
<div class="switch" id="switch4" style="height: 200px; width: 200px; background: yellow;"></div>

注：名前のついたクラスがないので、私は苦労しました：.news-toggleおよび.news-toggle-box。神！あなたが言及したのjQueryに関しては

Answer 2

、私はあなたがニューストグルボックスを隠し、クリックされたデータid.Change

window.onload = function toggleDiv(){ 
      var buttons = document.getElementsByClassName('switch-button'); 
      var divs = document.getElementsByClassName('switch'); 

      for(i=0; i<buttons.length; i++){ 
       buttons[i].addEventListener('click', function(event){ 
        for(j=0; j<divs.length; j++){ 
         divs[j].style.display = 'none'; 
        } 
        //Get the data-id of the current div 
        var data_id=event.target.getAttribute("data-id"); 
        var currentDiv=document.getElementById(data_id); 
        currentDiv.style.display="block"; 
        //Do whatever you want with your news toggle 
       }) 
      } 
     }` 

にコードが一致し、それぞれのdivを表示しようとしていると考えています