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

时间:2017-04-06 13:27:20

标签: javascript html css

当我点击第一个链接时,它将#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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

您可以将要切换的所有元素设置为一个类。我在下面的代码段中将它们设置为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>

答案 1 :(得分:0)

您可以通过以下方式在函数中使用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;

答案 2 :(得分:0)

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

&#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;