Javascript 显示和隐藏方块

Question

我有这个代码

var showcontent = document.querySelectorAll("#showcontent");
var allshowcontent = [document.getElementById("pinkshowscontent"), document.getElementById("redshowscontent"), document.getElementById("orangeshowscontent") ]
    for(var i = 0; i < showcontent.length; i++) {
        showcontent[i].addEventListener("click", function() {
            var showcontentelement = document.getElementById(event.target.className + "content");
            if (showcontentelement.style.display == "none") {
                showcontentelement.style.display = "block";
            } 
            var remove = allshowcontent.indexOf(showcontentelement);
            if (remove > -1) {
                allshowcontent.splice(remove, 1);
            }
            if (allshowcontent[0].style.display == "block") {
                allshowcontent[0].style.display = "none";
            }
      if (allshowcontent[1].style.display == "block") {
                allshowcontent[1].style.display = "none";
            }
        })
    }

    <div>
    <div>
      <ul>
        <li id="showcontent"><h3><a class="pinkshows">text1</a></h3></li>
        <li id="showcontent"><h3><a class="redshows">text2</a></h3></li>
        <li id="showcontent"><h3><a class="orangeshows">text3</a></h3></li>
        <li id="showcontent"><h3><a class="pinkshows">text4</a></h3></li>
        <li id="showcontent"><h3><a class="orangeshows">text5</a></h3></li>
      </ul>
    </div>
    <div id="pinkshowscontent" style="display: none; margin-bottom: 20px">
       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus...
    </div>
    <div id="redshowscontent" style="display: none; margin-bottom: 20px">
            Lorem ipsum dolor sit amet consectetur...
    </div>
    <div id="orangeshowscontent" style="display: none; margin-bottom: 20px">
       Lorem, ipsum dolor sit...
    </div>
  </div>

我希望当我按下一个文本时，显示具有适当 ID 的 div，但隐藏任何其他的，我的代码“显示：none”被应用于所有“lorem” ..." div's 当按下第二个、第三个...文本时。所以我尝试使用 indexOf 删除数组的 id，然后应用数组所有元素的 none 显示，但我做错了什么，有人能帮我吗？请

Answer 1

试试这个方法。

var showContents = document.getElementsByClassName("showcontent");

    for(var i = 0; i < showContents.length; i++) {
        showContents[i].addEventListener("click", function() {
            [].forEach.call(document.querySelectorAll('.content'), function (el) {
                  el.style.display = 'none';
            });
            var showcontentelement = document.getElementById(event.target.className + "content");
            showcontentelement.style.display = "block";
        })
    }

<div>
    <div>
      <ul>
        <li class="showcontent"><h3><a class="pinkshows">text1</a></h3></li>
        <li class="showcontent"><h3><a class="redshows">text2</a></h3></li>
        <li class="showcontent"><h3><a class="orangeshows">text3</a></h3></li>
        <li class="showcontent"><h3><a class="pinkshows">text4</a></h3></li>
        <li class="showcontent"><h3><a class="orangeshows">text5</a></h3></li>
      </ul>
    </div>
    <div class="content" id="pinkshowscontent" style="display: none; margin-bottom: 20px">
       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus...
    </div>
    <div class="content" id="redshowscontent" style="display: none; margin-bottom: 20px">
            Lorem ipsum dolor sit amet consectetur...
    </div>
    <div class="content" id="orangeshowscontent" style="display: none; margin-bottom: 20px">
       Lorem, ipsum dolor sit...
    </div>
  </div>

Answer 2

var atags = document.querySelectorAll("li a");

atags.forEach(addClickListener)
function addClickListener(atag){
   let content = 'content'  
  
   atag.addEventListener("click", function() {
   
   lorems = document.getElementsByClassName('lorem')
   for(let i = 0; i< lorems.length;i++){        
        lorems[i].style.display='none';   
   }   
   
   let myClass = atag.className  
   let show = document.getElementById(myClass + content)   
   show.style.display='block'   
})}

<div>
    <div>
      <ul>
        <li><h3><a class="pinkshows">text1</a></h3></li>
        <li><h3><a class="redshows">text2</a></h3></li>
        <li><h3><a class="orangeshows">text3</a></h3></li>
        <li><h3><a class="pinkshows">text4</a></h3></li>
        <li><h3><a class="orangeshows">text5</a></h3></li>
      </ul>
    </div>
    <div id="pinkshowscontent"  class='lorem' style="display: none; margin-bottom: 20px">
       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus...
    </div>
    <div id="redshowscontent" class='lorem' style="display: none; margin-bottom: 20px">
            Lorem ipsum dolor sit amet consectetur...
    </div>
    <div id="orangeshowscontent" class='lorem' style="display: none; margin-bottom: 20px">
       Lorem, ipsum dolor sit...
    </div>
  </div>

Javascript 显示和隐藏方块

Javascript show and hide blocks

html

javascript

block

display