單擊鏈接時切換div顯示狀態

Question

我試圖讓每個div在單擊相應的鏈接時顯示，但是我不斷收到錯誤消息

無法讀取null的屬性“樣式”

雖然我的一點點工作，但不確定是否選擇正確的語法event.target.style.display = 'none' 。

如果打開一個div，如何循環單擊並顯示每個div，其他的消失？

JSFiddle

const tab = document.querySelector('body');
const tab1 = document.querySelector('#home')
tab.addEventListener('click', function(event){
    event.target.style.backgroundColor = 'grey';
    tab1.style.display == 'none'
})

Answer 1

這就是我要做的：

1. 修正您的ID-它們應該是唯一的，因此請從您的鏈接中將其刪除
2. 向您的鏈接添加課程
3. 將一個類添加到您的內容div
4. 正確使用您的鏈接-使它們定位到相應的div
5. 將內容div包裝到包裝div中，以便可以使用我添加的CSS（請參見代碼）
6. 更新js（代碼問題注釋）

 var links = document.getElementsByClassName('link'), // add a class to the links and get them all contentDivs = document.getElementsByClassName('content'); // same with the content blocks for (i = 0; i < links.length; i++) { // loop through the links to add the event listeners var link = links[i]; // add event listener link.addEventListener('click', function(event) { // reset color and hide content: for (a = 0; a < links.length; a++) { // number of links should match number of content links[a].style.backgroundColor = 'magenta'; contentDivs[a].style.display = 'none'; } // set colour of clicked event.target.style.backgroundColor = 'grey'; // show clicked content document.getElementById(event.target.getAttribute("href").substring(1)).style.display = 'block'; }) } 

 ul { wudth: 100%; clear: both } li { padding: 10px; color: white; list-style: none; } li a { background: magenta; color: white; padding: 10px; } /* add this so only home is showing when page loads */ .content:not(:first-child) { display: none; } 

 <ul> <li><a href="#home" class="link">Home</a></li> <li><a href="#contact" class="link">Contact</a></li> <li><a href="#articles" class="link">Articles</a></li> <li><a href="#connect" class="link">Connect</a></li> </ul> <div> <div id="home" class="content"> home <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat velit, placerat sit amet nisl sed, aliquet bibendum nunc. Donec varius dui sed velit volutpat, et rutrum turpis fini </div> <br> <div id="contact" class="content"> contact <br> . Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquam iaculis turpis et efficitur. Integer sollicitudin tincidunt imperdiet. Nam pharetra orci ac viverra dapibus. Ut feugiat nisi sit amet hendrerit scelerisque. Nulla scelerisque mauris metus, eu facilisis lectus euismod vel. Pellentesque magna mi, scelerisque vel rutrum quis, volutpat et diam. </div> <div id="articles" class="content"> articles <br> . Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquam iaculis turpis et efficitur. Integer sollicitudin tincidunt imperdiet. Nam pharetra orci ac viverra dapibus. Ut feugiat nisi sit amet hendrerit scelerisque. Nulla scelerisque mauris metus, eu facilisis lectus euismod vel. Pellentesque magna mi, scelerisque vel rutrum quis, volutpat et diam. </div> <div id="connect" class="content"> connect <br> . Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquam iaculis turpis et efficitur. Integer sollicitudin tincidunt imperdiet. Nam pharetra orci ac viverra dapibus. Ut feugiat nisi sit amet hendrerit scelerisque. Nulla scelerisque mauris metus, eu facilisis lectus euismod vel. Pellentesque magna mi, scelerisque vel rutrum quis, volutpat et diam. </div> </div> 

Answer 2

因此，我的處理方法是將一個事件綁定到所有鏈接，然后隱藏所有內容部分，然后顯示要顯示的部分（默認情況下，它們也可能在CSS中隱藏）。 所有內容部分的通用類可能會為您提供幫助。 我使用數據屬性與可點擊鏈接進行配對，因為ID每頁必須唯一。

我進行了一些演示，但是您還有很多工作要做，管理錨點的顏色等等。

 const tab = document.querySelector('body'); //get all clickables const home = document.querySelector('#home'); const contact = document.querySelector('#contact'); const articles = document.querySelector('#articles'); const connect = document.querySelector('#connect'); // loop through all clickables and bind events [home, contact, articles, connect].forEach(function(tab){ tab.addEventListener('click', function(event){ var selection = event.currentTarget.id; //get our content sections var collapse = document.querySelectorAll('.collapsible'); for(var i = 0; i < collapse.length; i++){ //loop through them all and hide collapse[i].style.display = 'none'; } event.target.style.backgroundColor = 'grey'; //show the one we want document.querySelector(".collapsible[data-pair='"+selection+"']").style.display = 'block'; }) }); 

 ul{ wudth:100%; clear:both } li{ padding:10px; color:white; list-style:none; } li a{ background:magenta; color:white; padding:10px; } 

 <ul> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="contact">Contact</a></li> <li><a href="#" id="articles">Articles</a></li> <li><a href="#" id="connect">Connect</a></li> </ul> <div id="home_content" class='collapsible' data-pair="home"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat velit, placerat sit amet nisl sed, aliquet bibendum nunc. Donec varius dui sed velit volutpat, et rutrum turpis fini </div> <br> <div id="contact_content" class='collapsible' data-pair="contact"> . Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquam iaculis turpis et efficitur. Integer sollicitudin tincidunt imperdiet. Nam pharetra orci ac viverra dapibus. Ut feugiat nisi sit amet hendrerit scelerisque. Nulla scelerisque mauris metus, eu facilisis lectus euismod vel. Pellentesque magna mi, scelerisque vel rutrum quis, volutpat et diam. </div> <div id="articles_content" class='collapsible' data-pair="articles"> . Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquam iaculis turpis et efficitur. Integer sollicitudin tincidunt imperdiet. Nam pharetra orci ac viverra dapibus. Ut feugiat nisi sit amet hendrerit scelerisque. Nulla scelerisque mauris metus, eu facilisis lectus euismod vel. Pellentesque magna mi, scelerisque vel rutrum quis, volutpat et diam. </div> <div id="connect_content" class='collapsible' data-pair="connect"> . Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquam iaculis turpis et efficitur. Integer sollicitudin tincidunt imperdiet. Nam pharetra orci ac viverra dapibus. Ut feugiat nisi sit amet hendrerit scelerisque. Nulla scelerisque mauris metus, eu facilisis lectus euismod vel. Pellentesque magna mi, scelerisque vel rutrum quis, volutpat et diam. </div> 

希望對您入門有所幫助。

PS如評論中所述，您也不希望賦值等於兩倍。