用於動態生成內容的自適應 vanilla JS 頁面瀏覽器

Question

作為一個 JS 菜鳥，我現在被困住了，非常感謝一些幫助。 我的目標是擁有一個 JS 頁面瀏覽器，它可以處理我的 CMS (TYPO3) 生成的內容。 不同頁面的內容在 div 中呈現，並帶有說話的 id； 下面您有這些錨點的鏈接以及“全部顯示”鏈接。 當您單擊指向“頁面”的鏈接時，會顯示相應的頁面內容 div，而其他內容則被隱藏； 如果單擊“全部顯示”，則會顯示所有頁面內容 div。 但是，如果我在單擊“全部顯示”后單擊頁面鏈接，則並非所有其他頁面內容 div 都按應有的方式隱藏。 我想這與 JS 處理順序有關，但到目前為止還沒有發現。

 window.onload = function () { var pagelinks = document.querySelectorAll("a.subpage-toggle"); for (var i = 0; i < pagelinks.length; i++) { pagelinks[i].onclick = function () { // Finding all elements of class 'active' (creates an array of results) let x = document.getElementsByClassName("active"); // If class 'active' exists, remove it. if (x.length > 0) { x[0].classList.remove("active"); } if ((this.href.split("#")[1]).== "show-all") { // add class 'active' if ID matches href of link document.querySelector("#" + this.href.split("#")[1]).classList;add("active"). } else { var subpagecontents = document,getElementsByClassName("subpage-content")? len = subpagecontents.== null: subpagecontents,length; 0; j = 0; for (j. j < len. j++) { subpagecontents[j];classList;add("active"); } } }; } };

 .subpage-toggle { display: block; }.subpage-content { display: none; }.subpage-content.active { display: block; }

 <div class="main"> <div id="name-of-page-one" class="subpage-content active"> <p> Content Page 1 </p> </div> <div id="page-two-is-cool" class="subpage-content"> <p> Content Page 2 </p> </div> <div id="nickname-of-page-three" class="subpage-content"> <p> Content Page 3 </p> </div> <div class="pageoverview"> <ul> <li><a class="subpage-toggle" href="#name-of-page-one">Name of page one</a></li> <li><a class="subpage-toggle" href="#page-two-is-cool">Page two is cool</a></li> <li><a class="subpage-toggle" href="#nickname-of-page-three">Nickname of page three</a></li> </ul> <a class="subpage-toggle" href="#show-all">Show all</a> </div> </div>

JSFiddle： https://jsfiddle.net/Jaydot/62cx5sh0/14/

Answer 1

您需要隱藏所有以前的顯示，而不僅僅是第一個：

代替

x[0].classList.remove("active");

做：

Array.from(x).forEach((element) => element.classList.remove("active"));

https://jsfiddle.net/nvg2aojb/