當我點擊另一個時隱藏一個元素

當我點擊第一個鏈接時，它將#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>

來源

2017-04-06 Fer P

你就不能添加一個高度參數的版本功能？ – Axnyff

切換一個類並保持簡單 – epascarello

@epascarello是正確的。看到我的答案是在普通的js中做到這一點的片段。 jQuery $ .toggleClass（）也是一個不錯的選擇。 –

你可以將所有你想切換到一個類的元素。我已經將它們設置爲在我的代碼片段中鏈接Div，並相應地切換它們。因此，如果您要添加要隱藏的新元素並顯示可以添加它們。只需添加一個類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>

來源

2017-04-06 13:40:03 lhavCoder

謝謝，這工作！以及如何關閉所有第二次點擊？ –

第二次點擊什麼？你可以再詳細一點嗎？你的意思是，如果你第二次點擊任何鏈接，所有div應該關閉？ – lhavCoder

是的，沒錯。 –

您可以通過以下方式使用4個參數，你的函數：

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

.link { 
 
    padding: 10px 
 
} 
 

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

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

來源

2017-04-06 13:40:17 Johannes

下面是一個片段。此代碼簡潔，使用基於類的樣式而不是內聯樣式。課程是最佳實踐。

function ver(fotox, texto1) { 
 
    var collection = document.getElementsByClassName("link") 
 
    var array = Array.prototype.slice.call(collection, 0); 
 

 
    array.forEach(function(currentValue, index, array) { 
 
    currentValue.className = 'link'; 
 
    }); 
 

 
    var x = document.getElementById(fotox); 
 
    x.className = 'link active'; 
 
    x.innerHTML = texto1; 
 
}

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

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

 
.link.active { 
 
    padding: 10px; 
 
    height: 200px; 
 
    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>

來源

2017-04-06 13:42:33

當我點擊另一個時隱藏一個元素

回答

相關問題