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

Question

我的网络中有一个用户注册页面，当用户选择它时，我需要通过无线电切换表单详细信息

这样

<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>

Answer 2

也许最简单的方法是：

document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('form');
  const tabs = form.querySelectorAll('.tab');
    
  form.addEventListener('change', ({target}) => {
    if (target.name !== 'userType') return;
        
    const tabToShow = form
      .querySelector(`.tab-${target.value}`);
      

    tabs.forEach(tab => {
        const tabInput = tab.querySelector('input');
      
      tabInput.value = '';
      tab.classList.add('hidden');  
    });
     
    tabToShow.classList.remove('hidden');
  })
});

.hidden {
  display: none;
}

<form>
  <label>1: <input checked 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 tab-1"><input placeholder="UserType 1 Input"></div>
  <div class="tab tab-2 hidden"><input placeholder="UserType 2 Input"></div>
  <div class="tab tab-3 hidden"><input placeholder="UserType 3 Input"></div>

</form>