Wie Sie sehen können, werden 3 divs mit JavaScript erstellt, wenn auf die entsprechenden Schaltflächen geklickt wird. Ich übergebe ihre Werte und verwende diese dann, um den Inhalt zu erstellen. Ich bin mir nicht sicher, ob dies der beste Weg ist ... aber trotzdem.
Das Problem ist, dass die divs weiterhin angehängt werden. Ich möchte jeweils nur einen div anzeigen und die aktive div's Schaltfläche deaktivieren. Ich habe gesehen, dass Sie so etwas wie document.querySelector('button[onclick]').disabled = true; verwenden können, bin mir aber nicht sicher, wie es dynamisch funktionieren soll, da es auf false gesetzt werden müsste, sobald auf eine der anderen Schaltflächen geklickt wird.
Hier ist mein JavaScript, das für die Erstellung des Inhalts verantwortlich ist:
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.';
}
}
Meine JSFiddle: http://jsfiddle.net/wwen39o9/
4 Antworten
Ich habe Ihre Geige aktualisiert: http://jsfiddle.net/wwen39o9/3/
Kurz gesagt, fügen Sie dem HTML-Code ein Div hinzu:
<div id="myDiv"></div>
Geben Sie den Schaltflächen eine Klasse 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.');
}
Reine JS-Version ohne 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;
}
Verschiedene Möglichkeiten, eine aktive Schaltfläche in einer Gruppe von Schaltflächen festzulegen:
Wenn sie auf einen Wrapper beschränkt sind:
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;
}
Oder indem Sie allen eine Klasse wie .nav-btn geben
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;
}
Ein guter Weg, um div auszutauschen:
Überprüfen Sie, ob div vorhanden ist. Ersetzen Sie den Inhalt, wenn ja, erstellen Sie div, wenn nicht.
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);
}
}
So:
function handleClick() {
setActive(this);
if (this.name === 'home') {
showDiv('Information about being home');
}
}
<button onclick="handleClick">
Die Append-Methode sollte nur aufgerufen werden, wenn wir keine gefunden haben.
Etwas wie
function showDiv(name) {
var selectedButton = name.value;
var div = document.getElementById('myDiv');
if(!div) {
document.createElement('div');
div.id = 'myDiv';
document.body.appendChild(div);
}
Wir können die Anzahl der div Elemente auf der Seite überprüfen
Oder warum nicht wie folgt? Am Anfang haben wir ein leeres div mit id="myDiv" und dann ändern wir nur den Inhalt mit JavaScript. Schauen Sie sich das JSFiddle-Beispiel an.
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.';
}
}