[分享]css做题如何选择完答案自动跳

CSS做题时，我们有时会遇到选择完答案后，需要自动跳转到下一题的情况。下面将介绍如何使用CSS实现这个功能。首先，我们需要在HTML中设置题目和选项的结构，并为每个选项添加一个单选框，例如： 问题1：...

CSS做题时，我们有时会遇到选择完答案后，需要自动跳转到下一题的情况。下面将介绍如何使用CSS实现这个功能。

首先，我们需要在HTML中设置题目和选项的结构，并为每个选项添加一个单选框，例如：

<div class="question">
  <p>问题1：以下哪个是CSS的盒模型？</p>
  <label for="op1">
    <input type="radio" id="op1" name="answer" value="A"> A. content-box 
  </label>
  <label for="op2">
    <input type="radio" id="op2" name="answer" value="B"> B. padding-box 
  </label>
  <label for="op3">
    <input type="radio" id="op3" name="answer" value="C"> C. border-box 
  </label>
</div> 

接下来，我们需要为选项的单选框添加一个选中后的样式，并通过CSS选择器来为选中的radio对应的label元素进行样式调整。例如：

input[type="radio"]:checked + label {
  font-weight: bold;
  color: blue;
} 

然后，我们需要使用JavaScript来监听选项的更改，并在选中选项后根据题目数量和当前题目的位置判断是否需要跳转到下一题。例如：

var questions = document.querySelectorAll('.question');
var currentIndex = 0;
var totalQuestions = questions.length;

questions[currentIndex].style.display = 'block';

document.querySelectorAll('input[type="radio"]').forEach(function (input) {
  input.addEventListener('change', function () {
    if (currentIndex + 1 < totalQuestions) {
      questions[currentIndex].style.display = 'none';
      questions[currentIndex + 1].style.display = 'block';
      currentIndex++;
    } else {
      alert('恭喜您完成了所有的题目！');
    }
  });
}); 

最后，在HTML中添加一个隐藏的“下一题”按钮，并在JavaScript中在题目跳转后模拟点击该按钮来保证下一题能够正确显示。例如：

<button style="display:none" class="next-question">下一题</button>

...

if (currentIndex + 1 < totalQuestions) {
  ...
  document.querySelector('.next-question').click();
}

... 

这时，我们就完成了使用CSS实现选择完答案自动跳转到下一题的功能。