单击另一个元素时隐藏一个元素

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

.link {
  padding: 10px
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

您可以通过以下方式在函数中使用4个参数：

＆＃13;

＆＃13;

function ver(fotox1, fotox2, texto1, texto2) {
  var x = document.getElementById(fotox1);
  x.style.height = '200px';
  x.innerHTML = texto1;
  var y = document.getElementById(fotox2);
  y.style.height = '0px';
  y.innerHTML = texto2;
}

＆＃13;

.link {
  padding: 10px
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

以下是一个片段。此代码简洁，使用基于类的样式而不是内联样式。课程是最佳实践。

＆＃13;

＆＃13;

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

.link {
  padding: 10px;
  height: 0px;
  overflow: hidden;
}

.link.active {
  padding: 10px;
  height: 200px;
  overflow: hidden;
}

＆＃13;

<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>

＆＃13;

var renderBottles =  bottleArray.map(bottle => (
  <div> {bottle.bottleId} - {bottle.qty} <a href='#' onClick={ () => this.props.store.del(0)}>X</a></div>
))

＆＃13;

＆＃13;

＆＃13;