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

Posted 2023-03-27

【中文标题】如何通过单选按钮进行选项卡切换

【英文标题】：How to make a tab switch by radio buttons

【发布时间】：2021-10-26 05:03:56

【问题描述】：

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

这样

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

【参考方案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>

【讨论】：

更改选项卡时可以清除输入

【参考方案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>

【讨论】：

你好@capchunk 我在你的代码中遇到了一个错误"Uncaught TypeError: Cannot read property 'classList' of null"

当我输入一些东西并改变标签时:(

更改选项卡时可以清除输入

@NWD 现在看看。