javascript - 显示基于单选按钮的 HTML 代码的特定部分？

Question

我有 2 个单选按钮，用于确定显示什么 HTML。当选择其中一个时，它应该显示它的 HTML 并隐藏另一个。我该怎么做呢？我是创建代码并使其不可见，还是在选中单选按钮时添加代码？

Answer 1

您可以在选择按钮之前添加代码并将其设置为 display:none。然后，您创建两个函数，它们始终显示一个元素并隐藏另一个元素。

function changeContent1() {
  document.getElementById("show1").classList.remove("hide");
  document.getElementById("show2").classList.add("hide");
}

function changeContent2() {
  document.getElementById("show1").classList.add("hide");
  document.getElementById("show2").classList.remove("hide");
}

.hide {
  display: none;
}

<input type="radio" name="myRadios" onclick="changeContent1();" value="1" />
<input type="radio" name="myRadios" onclick="changeContent2();" value="2" />
<div id="show1" class="hide">
  <p>First div</p>
</div>
<div id="show2" class="hide">
  <p>Second div</p>
</div>