从一组按钮转移到另一组按钮

问题描述 投票:0回答:2

我正在尝试将一组按钮更改为其他按钮。它更改为哪个按钮取决于所选的按钮。

  • 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,请告诉我。

javascript html css
2个回答
0
投票

这不是最好的选择,但它可以满足您的需求。本质上,我为单击每个按钮创建了一个事件侦听器。然后,只需显示隐藏的按钮并隐藏当前按钮即可。

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>

0
投票

这里是使用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>
© www.soinside.com 2019 - 2024. All rights reserved.