javascript - 当我点击另一个元素时隐藏一个元素

Question

当我单击第一个链接时，它会将 #foto 高度设置为 200px。如果我点击第二个链接，它会将 #foto1 高度设置为 200px。

我想要的是单击第二个链接将 #foto 高度设置为 0px ，反之亦然。有帮助吗？

function ver(fotox, texto1) {
  var x = document.getElementById(fotox);
  x.style.height = '200px';
  x.innerHTML = texto1;
}

.link {
  padding: 10px
}

#foto,
#foto1 {
  background-color: orange;
  margin-top: 20px;
  height: 0px;
  overflow: hidden
}

<a href="#" class="link" onClick="ver('foto','hola')">1</a>
<div id="foto"> parte 1</div>
<a href="#" class="link" onClick="ver('foto1','chau')">3</a>
<div id="foto1"> Parte 2</div>

Answer 1

您可以将所有要切换的元素设置到一个类中。我在下面的代码片段中将它们设置为 linkDiv 并相应地切换它们。因此，如果您要添加要隐藏和显示的新元素，您可以添加它们。只需向其添加一个类 linkDiv 即可。

function ver(fotox,texto1) {
    var x = document.getElementById(fotox);
    if(x.style.height=="" || x.style.height=="0px")
    x.style.height= '200px';
    else 
    x.style.height='0px';
    x.innerHTML= texto1;
    var element=document.getElementsByClassName('linkDiv');
    for(var i=0; i<element.length;i++){
    if(element[i].getAttribute("id")!=fotox)
    {
    //console.log("compared "+element[i].getAttribute("id")+fotox);
    element[i].style.height= '0px';
    }
    }
    }

.link {
        padding:10px

    }
    #foto, #foto1 {
        background-color:orange;
        margin-top: 20px;
        height: 0px;
        overflow:hidden
    }

<a href="#" class="link" onClick="ver('foto','hola')">1</a>
    <div id="foto" class="linkDiv"> parte 1</div>
    <a href="#" class="link" onClick="ver('foto1','chau')">3</a>
    <div id="foto1" class="linkDiv"> Parte 2</div>