我正在尝试将一组按钮更改为其他按钮。它更改为哪个按钮取决于所选的按钮。
Button1:单击时,两个按钮均被按钮替换:Button1a和Button1b
Button2:单击时,两个按钮均替换为按钮:Button2a和Button2b
到目前为止,我得到了:
<div class="buttons">
<div class="buttons1-2">
<button type="button" class="btn btn1">Button 1</button>
<button type="button" class="btn btn2">Button 2</button>
</div>
<div class="buttons1a-b">
<button type="button" class="btn btn1a">Button 1a</button>
<button type="button" class="btn btn1b">Button 1b</button>
</div>
<div class="button2a-b">
<button type="button" class="btn btn2a">Button 2a</button>
<button type="button" class="btn btn2b">Button 2b</button>
</div>
</div>
并且我已经隐藏了1a-b和2a-b按钮:
.button1a-b {
display: none;
}
.button2-b {
display: none;
}
但是我正在为此创建JavaScript代码。有人可以帮我用JavaScript编写代码吗?另外,如果有更好的方法为此编写HTML / CSS,请告诉我。
这不是最好的选择,但它可以满足您的需求。本质上,我为单击每个按钮创建了一个事件侦听器。然后,只需显示隐藏的按钮并隐藏当前按钮即可。
document.getElementById('btn1').addEventListener('click', function() {
changeButtons(document.getElementsByClassName('buttons1a-b'), 'block');
this.style.display = "none";
document.getElementById('btn2').style.display = "none";
});
document.getElementById('btn2').addEventListener('click', function() {
changeButtons(document.getElementsByClassName('button2a-b'), 'block');
document.getElementById('btn1').style.display = "none";
this.style.display = "none";
});
function changeButtons(coll, display) {
for (var i = 0, len = coll.length; i < len; i++) {
coll[i].style["display"] = display;
}
}
.buttons1a-b {
display: none;
}
.button2a-b {
display: none;
}
<div class="buttons">
<div class="buttons1-2">
<button id="btn1" type="button" class="btn btn1">Button 1</button>
<button id="btn2" type="button" class="btn btn2">Button 2</button>
</div>
<div class="buttons1a-b">
<button type="button" class="btn btn1a">Button 1a</button>
<button type="button" class="btn btn1b">Button 1b</button>
</div>
<div class="button2a-b">
<button type="button" class="btn btn2a">Button 2a</button>
<button type="button" class="btn btn2b">Button 2b</button>
</div>
</div>
这里是使用onClick()
可以完成的示例>
function buttonPushed(btn) { var replacewith = "buttons1a-b"; if (btn.id == "btn2") { replacewith = "buttons2a-b"; } var allChildren = document.getElementsByClassName('buttons')[0].children; for (var i = 0; i < allChildren.length; i++) { var child = allChildren[i]; if (child.className != replacewith) { child.style.display = "none"; } else { child.style.display = "inline"; } } }
.buttons1a-b { display: none; } .button2a-b { display: none; }
<div class="buttons"> <div class="buttons1-2"> <button id="btn1" class="btn btn1" onclick="buttonPushed(this)">Button 1</button> <button id="btn2" class="btn btn2" onclick="buttonPushed(this)">Button 2</button> </div> <div class="buttons1a-b"> <button class="btn btn1a">Button 1a</button> <button class="btn btn1b">Button 1b</button> </div> <div class="button2a-b"> <button class="btn btn2a">Button 2a</button> <button class="btn btn2b">Button 2b</button> </div> </div>