更改div內容與其他div內容

我可能在嘗試查找此問題的答案時瀏覽了錯誤的搜索詞，但我找到的都是jQuery解決方案。更改div內容與其他div內容

我試圖實現的是通過點擊不同的按鈕，是改變一個「容器」div的內容，與您點擊按鈕相應的div內容。

我覺得我的javascript在這jsfiddle是不夠的，但這是我從瀏覽中想出來的。

HTML

<div id="content"> 
<div id="work1" class="work">Content 1</div> 
<div id="work2" class="work">Content 2</div>  
</div> 

<input type="button" onclick="changeContent('work1');" value="work 1"/> 
<input type="button" onclick="changeContent('work2');" value="work 2"/>

CSS

#content{ 
    height:500px; 
    width:500px; 
    border:1px solid #000; 
}

的Javascript

function changeContent(){ 
document.getElementById('content').innerHTML = document.getElementByClassName('work'); 
}

我使用類，因爲我認爲這將削減所需的JavaScript？

來源

2013-12-12 Jompa

您設置innerHTML來一個節點列表......你究竟想要做什麼？顯示/隱藏內容？ – epascarello

在它們之間切換。我想你可以說顯示和隱藏。像這樣：http://jsfiddle.net/SO_AMK/BcFVv/但在JavaScript中，而不是jquery – Jompa

function changeContent(id){ 
    var elems = document.getElementsByClassName('work'); //get elements with the class 
    for (var i=0;i<elems.length;i++) { //loop through them all 
     elems[i].style.display = "none"; //set display to none to hide them 
    } 
    document.getElementById(id).style.display="block"; //find the element passed in and show it 
}

來源

2013-12-12 01:54:00 epascarello

完美的，正是我所期待的。謝謝 – Jompa

document.getElementByClassName('work');

應該是

document.getElementsByClassName('work'); // check the missing s

這返回現場節點列表。如果類名的每個都是獨一無二的，那麼你可以直接使用的第一個元素

document.getElementByClassName('work')[0].innerHTML;

而且它是更好的主意，事件綁定在JavaScript，而不是分配內事件屬性。

來源

2013-12-12 01:48:51

如果我理解是正確的，你想基於一個特定的按鈕，點擊顯示/隱藏內容

試試這個

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#content{ 
    height:500px; 
    width:500px; 
    border:1px solid #000; 
} 

</style> 
<script language = "javascript"> 

function showContent(value) 
{ 
    if(value == 'work1'){ 
     document.getElementById('work2').style.visibility = "hidden"; 
     document.getElementById('work1').style.visibility = "visible"; 
    } 
    else{ 
     document.getElementById('work2').style.visibility = "visible"; 
     document.getElementById('work1').style.visibility = "hidden";  
    } 
} 
</script> 

</head> 
<body> 
<div id="content"> 
<div id="work1" class="work">Content 1</div> 
<div id="work2" class="work">Content 2</div>  
</div> 

<input type="button" onclick="showContent('work1');" value="show work 1"/> 
<input type="button" onclick="showContent('work2');" value="show work 2"/> 
</body> 
</html>

來源

2013-12-12 02:17:53 nimish

更改div內容與其他div內容

回答

相關問題