Javascript 简单选项卡式div

我有一个简单的任务网站，我想添加创建重复任务的功能

  <label class = "formLabel">Recurring?</label>

  <div class = "radioWrap">
    <label for="once" id = "onceLabel" class="radioLabel">One Time</label>
    <label for="repeat" id = "repeatLabel" class="radioLabel">Repeat</label>
    <input id="once" style="display: none" name="recurring" value="once" type="radio" checked>
    <input id="repeat" style="display: none" name="recurring" value="repeat" type="radio">
  </div>

  <div id = "onceD">
    <label class = "formLabel">Deadline</label>
    <input type = "date" class = "inputText" name = "dateInput" minlength = "5" maxlength = "10" placeholder = "Deadline (MM/DD/YYYY)" required>
  </div>
  <div id = "repeatD">
    <label class = "formLabel">Frequency (days)</label>
    <input type = "number" class = "inputText" name = "freqInput" min = "1" max = "20" placeholder = "Repeat every x days" required>
    <label class = "formLabel">Start date</label>
    <input type = "date" class = "inputText" name = "startInput" placeholder = "Start date (MM/DD/YYYY)" required>
    <label class = "formLabel">End date</label>
    <input type = "date" class = "inputText" name = "endInput" placeholder = "End date (MM/DD/YYYY)" required>
  </div>

重复出现？
一次
重复
截止日期
频率（天）
开始日期
结束日期

---

由于单选按钮周围有包装，CSS无法工作，因此我如何使用纯Javascript创建一种基本的选项卡式浏览体验，用户可以单击一个单选按钮来显示#onceD，然后单击另一个按钮来隐藏#onceD并显示#repeated，同时禁用隐藏div的子输入（因为它们被标记为必需）我这样做是为了让单选按钮正常工作

html

不幸的是，让单选按钮只使用单选按钮更新div时出现了一个问题。所以我添加了一个按钮来检查选中了哪个单选按钮。我本想共享JSFIDLE，但它在那里不起作用

您可能只需要单选按钮就可以让它工作，但我认为您需要使用jQuery

---

使用其他输入类型也可能更容易做到这一点

下面应该使用Vanilla JS实现这一技巧。它也是动态的，因为它允许您向顶部的阵列添加更多单选按钮/选项卡ID。如果您对代码有任何疑问，请告诉我

实现这一目标的主要步骤是：

在单选按钮上添加更改事件的事件侦听器

radioButton.addEventListener（'change'，（e）=>已激活（e），false）

这会将事件侦听器添加到各个单选按钮中。本质上，这会导致在激活以前未选择的单选按钮时调用
activated
功能<代码>e

是对传递到函数中的事件的引用

隐藏与选中单选按钮不对应的所有选项卡

在激活的

函数中：
currentTab.classList.add（'hide'）

这将添加css类
hide
，该类设置css属性
display:none

显示与选中单选按钮对应的一个选项卡

在激活的

函数中：
currentTab.classList.remove（'hide'）

这将删除该类，即使选项卡再次可见

适当设置默认值

在HTML中：

，以便在加载第一页时隐藏此div

可选：使其更通用…

const tabConfiguration=…

。。。将所有ID存储在一个数组中，然后在该数组上循环，而不是使用静态/单个ID。一般这样做至少可以避免一些重复（因为干燥）

/*为简洁起见，此处未包含IIFE包装*/
/*所有ID位于一个位置，便于更改和调整配置
*标签/开关应视为相互排斥，即没有两个
*选项卡同时显示*/
常量选项卡配置=[{
togglerId:'一次'，
tabId:'onceD'，
},
{
togglerId:'重复'，
tabId:'重复'，
}
]
/*循环配置和
*为选中按钮时激发的每个单选按钮添加事件侦听器*/
对于（设i=0；i{
已激活（e）
}，假）；
}
/*触发事件时每个事件侦听器调用的事件侦听器函数*/
功能启动（e）{
/*与id匹配*/
对于（设i=0；i

.hide{
显示：无；
}

重复出现？
一次
重复
截止日期
频率（天）
开始日期
结束日期

假设您根本无法更改DOM，那么您是对的，CSS不起作用。但是，如果您可以更改DOM，我建议您这样做。您的单选按钮设置为

display:none

，那么为什么不将您试图显示/隐藏的内容的那些同级设置为同级呢？这样，您就可以使用CSS来实现它

选择1 我真的希望你能改变你的DOM，因为如果你能，那么仅仅使用CSS是非常简单的。请查看下面的代码段：

#一次：选中#重复#重复：选中#一次{
显示：无；
}

重复出现？
一次
重复
截止日期
频率（天）
开始日期
结束日期

您是否已经习惯于使用单选按钮？一点也不习惯。我只是把它们作为一个起点，因为该网站还有一些其他类似结构和样式的按钮。我首先尝试了CSS的唯一方法，但当选中相应的单选按钮时，我无法控制nephew（？）标签的样式。有没有一种方法我没有注意到？我不完全确定你的意思-相应的标签在工作表的下面层叠得更远，因此你应该能够使用选择器（例如

#once:checked#onceLabel

或类似的东西）来定位标签。这样不行吗？正如我所提到的，CSS唯一的方式要求DOM从您发布的版本更改，这就是为什么我提供了两个选项-一个是DOM完全保持原样，另一个是对其进行非常小的更改Jimmy@JimmyVanVeencss解决方案

<input id="swap1" type="radio"  name="rad" value="onceD" onclick="">OnceD</input>
<input id="swap2" type="radio" name="rad" value="repeatD"  onclick="">repeatD</input>


<input id="testButton" type="button" onclick="swap();">Test</input>


<div id = "onceD">
<label class = "formLabel">Deadline</label>
<input type = "date" class = "inputText" name = "dateInput" minlength = "5" maxlength = "10" placeholder = "Deadline (MM/DD/YYYY)" required>
</div>
<div id = "repeatD">
<label class = "formLabel">Frequency (days)</label>
<input type = "number" class = "inputText" name = "freqInput" min = "1" max = "20" placeholder = "Repeat every x days" required>
<label class = "formLabel">Start date</label>
<input type = "date" class = "inputText" name = "startInput" placeholder = "Start date (MM/DD/YYYY)" required>
<label class = "formLabel">End date</label>
<input type = "date" class = "inputText" name = "endInput" placeholder = "End date (MM/DD/YYYY)" required>
</div>

var x=document.getElementById("swap1");
var y=document.getElementById("swap2");
var onceD = document.getElementById("onceD");
var repeatD = document.getElementById("repeatD");


function swap()
{

if(x.checked == true)
 {
  onceD.style.display = 'block';
  repeatD.style.display = 'none';
 }

if(y.checked == true)
 {
  onceD.style.display = 'none';
  repeatD.style.display = 'block';
 }

}