javascript - 简单的选项卡式 div

Question

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

  <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 并显示 #repeatD，同时禁用隐藏 div 的子输入(因为它们被标记为必需)

Answer 1

假设你根本无法改变 DOM，那么你是对的，CSS 不起作用。不过，如果您可以更改 DOM，我建议您这样做。无论如何，您已将单选按钮设置为 display: none ，那么为什么不将这些单选按钮设置为您尝试显示/隐藏的内容的同级呢？这样你就可以只使用 CSS。

选项 1

我真的希望你可以改变你的 DOM，因为如果你可以，那么只使用 CSS 就非常简单了。查看下面的代码片段:

#once:checked ~ #repeatD, #repeat:checked ~ #onceD {
  display: none;
}

 <label class = "formLabel">Recurring?</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 class = "radioWrap">
    <label for="once" id = "onceLabel" class="radioLabel">One Time</label>
    <label for="repeat" id = "repeatLabel" class="radioLabel">Repeat</label>
  </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>

选项 2

无论如何，假设您无法更改 DOM 一点点，您需要向 CSS 添加一个 hide 类(JavaScript 事件处理程序将调用该类来隐藏相应的选项卡)。然后，您将希望查看我的以下 JavaScript 代码，以了解我如何将事件处理程序分配给单选按钮:

// Get your radio buttons to check if they are checked
let once = document.querySelector('#once');
let repeat = document.querySelector('#repeat');
// Get your content you want to show/hide
let onceD = document.querySelector('#onceD');
let repeatD = document.querySelector('#repeatD');

// Get your inputs so you can add event listeners to them
let inputs = document.querySelectorAll('#once, #repeat');

// A function that will check both of your radio buttons, and take
// appropriate action based on the status of its 'checked' state
const selectActive = (e) => {
  once.checked ? onceD.classList.remove('hide') : onceD.classList.add('hide');
  repeat.checked ? repeatD.classList.remove('hide') : repeatD.classList.add('hide');
}

// Add the event listeners to the group of inputs we gathered above
// Note we are passing in the function we just defined as the handler
inputs.forEach(input => input.addEventListener('change', selectActive));

// Since the function was externall defined (outside of the event
// handeler) we can use it to set up a default status
selectActive();

.hide {
  display: none;
}

 <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 方法的个人粉丝，因为就像我说的那样，无论如何你都会隐藏这些单选按钮:)