javascript - 如何通过单选按钮进行选项卡切换

Question

我的网站上有一个用户注册页面，当用户选择它时，我需要通过 radio 切换表单详细信息
像这样

<form>
  <label>1: <input type=radio  name="userType" value="1"/></label>
  <br>
  <label>2: <input type=radio  name="userType" value="2"/></label>
  <br>
  <label>3: <input type=radio  name="userType" value="3"/></label>
  <br>
  <div class="tab-1"><input placeholder="UserType 1 Input"></div>
  <div class="tab-2"><input placeholder="UserType 2 Input"></div>
  <div class="tab-3"><input placeholder="UserType 3 Input"></div>

</form>

我可以只使用 html 吗？ , js和 css

Answer 1

是的，你可以只使用 js , css和 html试试这个代码
更新 (1)

const tabs = document.querySelectorAll(".tab");
const radio = document.querySelectorAll(".toggleTab");
const inputs = document.querySelectorAll(".tab input");

for(var x=0; x < radio.length; x++){
  radio[x].addEventListener("change", function(){
    for(var y = 0; y < inputs.length; y++){
      inputs[y].value = "";
    }
  
    for(var i=0; i < tabs.length; i++){
      tabs[i].classList.add("d-none");
      if(this.checked && tabs[i].getAttribute("tabname") == this.value){
        tabs[i].classList.remove("d-none")
      }
    }
    
  });
}

.d-none{ display:none; }

<form>
  <label>1: <input type=radio class="toggleTab"  name="userType" value="1" checked></label>
  <br>
  <label>2: <input type=radio  class="toggleTab" name="userType" value="2"/></label>
  <br>
  <label>3: <input type=radio  class="toggleTab" name="userType" value="3"/></label>
  <br>
  <div class="tab" tabname=1>
      <input placeholder="UserType 1 Input">
  </div>
  <div class="tab d-none" tabname=2>
      <input placeholder="UserType 2 Input">
  </div>
  <div class="tab d-none" tabname=3>
      <input placeholder="UserType 3 Input">
  </div>

</form>