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

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

标签： javascripttabsradio

Answer 1

也许最简单的方法是：

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>