一次显示一个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">