一次顯示一個Div並禁用活動Div的按鈕

Question

正如您所看到的，當點擊各自的按鈕時，將使用JavaScript創建3 divs。我傳遞了他們的值，然後用它們來創建內容。我不確定這是否是最好的方法......但無論如何。

問題是divs不斷追加。我一次只想顯示一個div，我也想要禁用活動的div's按鈕。我已經看到您可以使用類似document.querySelector('button[onclick]').disabled = true;的東西，但我不確定如何使其動態工作，因爲一旦點擊了其他任何按鈕，就必須將其設置爲false。

這是我的JavaScript負責創建內容：

function showDiv(name) { 
    var selectedButton = name.value; 
    var div = document.createElement('div'); 
    div.id = 'myDiv'; 
    document.body.appendChild(div); 

    if (selectedButton === 'home') { 
     div.innerHTML = 'Hi, this is a test for the ' + selectedButton + ' div.'; 

    } else if (selectedButton === 'about') { 
     div.innerHTML = 'Hi, this is a test for the ' + selectedButton + ' div.'; 

    } else if (selectedButton === 'contact') { 
     div.innerHTML = 'Hi, this is a test for the ' + selectedButton + ' div.'; 
    } 
} 

我的jsfiddle：如果我們沒有找到一個http://jsfiddle.net/wwen39o9/

Answer 1

我已經更新了你的提琴：http://jsfiddle.net/wwen39o9/3/

總之，一個DIV添加到HTML：

<div id="myDiv"></div>

給按鈕的類navbutton：

的Javascript：

function showDiv(me) { 
    $('.navbutton').prop('disabled', false); 
    $(me).prop('disabled', true); 
    $('#myDiv').html('Hi, this is a test for my ' + $(me).val() + ' div.'); 
} 

純JS版無jQuery的：

function showDiv(me) { 
    var div = document.getElementById('myDiv'); 
    var buttons = document.getElementsByTagName('button'); 
    for (var i = 0; i < buttons.length; i++) { 
     if (buttons[i].className == 'navbutton') 
      buttons[i].disabled = false; 
    } 

    me.disabled = true; 
    div.innerHTML = 'Test for ' + me.value; 
} 

Answer 2

append方法應只調用。

喜歡的東西

function showDiv(name) { 
    var selectedButton = name.value; 
    var div = document.getElementById('myDiv'); 
    if(!div) { 
     document.createElement('div'); 
     div.id = 'myDiv'; 
     document.body.appendChild(div); 
} 

Answer 3

我們可以檢查

頁

或者爲什麼不這樣做就像下面就div元素的數量。開始時我們有一個空的div與id="myDiv"，然後我們只是用JavaScript改變它的內容。看看JSFiddle example。

HTML

<button value="home" onclick="showDiv(this);">Home</button> 
<button value="about" onclick="showDiv(this);">About</button> 
<button value="contact" onclick="showDiv(this);">Contact</button> 

<!-- create an empty div --> 
<div id="myDiv"></div> 

的JavaScript

function showDiv(name) { 
    var selectedButton = name.value; 
    var div = document.getElementById('myDiv'); 

    if (selectedButton === 'home') { 
     div.innerHTML = 'Hi, this is a test for the ' + selectedButton + ' div.'; 

    } else if (selectedButton === 'about') { 
     div.innerHTML = 'Hi, this is a test for the ' + selectedButton + ' div.'; 

    } else if (selectedButton === 'contact') { 
     div.innerHTML = 'Hi, this is a test for the ' + selectedButton + ' div.'; 
    } 
} 

Answer 4

幾種方式一組按鈕中設置活動按鈕：

如果它們被限制在一個包裝：

function setActive(selectedButton){ 
    var parent = selectedButton.parentNode; 
    var children = parent.getElementsByTagName('button'); 
    var child_ct = children.length - 1; 
    while (child_ct) { 
     children[child_ct].disabled = false; 
     child_ct--; 
    } 

    selectedButton.disabled = true; 
} 

或者通過給所有類似。NAV-BTN

function setActive(selectedButton) { 
    var parent = selectedButton.parentNode; 
    var children = parent.getElementsByClassName('nav-btn'); 
    var child_ct = children.length - 1; 
    while (child_ct) { 
     children[child_ct].disabled = false; 
     child_ct--; 
    } 

    selectedButton.disabled = true; 
} 

換出DIV的一個好辦法：

檢查是否存在DIV。如果是，請更換內容，如果不是，則創建div。

function showDiv(content) { 
    var div = document.getElementById('the-div'); 
    if (div) { 

     //May be better to remove children, then append content, but... 
     div.innerHTML = content 
    } else { 
     var the_div = document.createElement('div'); 
     the_div.id = 'the-div'; 
     the_div.innerHTML = content; 
     document.appendChild(the_div); 
    } 

} 

所以：

function handleClick() { 
    setActive(this); 
    if (this.name === 'home') { 
     showDiv('Information about being home'); 
    } 

} 

<button onclick="handleClick">