使用HTML和JavaScript实现多选题切换Div显示效果-html教程-PHP中文网

使用HTML和JavaScript实现多选题切换Div显示效果

DDD

发布： 2025-10-18 12:46:29

原创

920人浏览过

使用html和javascript实现多选题切换div显示效果

本文旨在指导开发者如何使用HTML和JavaScript实现一个简单的多选题切换Div显示效果。通过监听按钮点击事件，控制不同Div的显示与隐藏，从而实现题目切换的交互效果。文章将提供详细的代码示例和解释，并针对常见问题提供解决方案。

HTML结构

首先，我们需要创建HTML结构，使用多个div元素来表示不同的题目。每个div包含题目内容和多个选项按钮。

<div class="box box1">
    <h1>Awesome Quiz</h1>
    <p>Trivia Time ??!!!</p>
    <button id="start">Start</button>
</div>
<div class="quest box2">
    <h2>Awesome Quiz</h2>
    <p>Who was the first President of the United States?</p>

    <p>George Washington</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Thomas Jefferson</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>Thomas Edinson</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>I don't Know</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 1 of 5</p>
    </div>
</div>
<div class="quest box3">
    <h2>Awesome Quiz</h2>
    <p>What is Queen Elizabeth II's surname?</p>

    <p>Jason</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Windsor</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>Drakeford</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>William</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 2 of 5</p>
    </div>
</div>
<div class="quest box4">
    <h2>Awesome Quiz</h2>
    <p>What is the largest country in the world?</p>

    <p>Russia</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Canada</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>India</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>South Africa</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 3 of 5</p>
    </div>
</div>

登录后复制

每个题目div都具有唯一的类名（如box2、box3等），选项按钮也具有相同的类名option。

JavaScript实现

接下来，使用JavaScript来实现点击选项按钮后切换div显示的效果。

立即学习“Java免费学习笔记（深入）”；

let start = document.querySelector('#start');
let intro = document.querySelector('.box1');
let quest = document.querySelector('.quest');
let box2 = document.querySelector('.box2');
let box3 = document.querySelector('.box3');
let box4 = document.querySelector('.box4');
let box5 = document.querySelector('.box5');
let box6 = document.querySelector('.box6');
let select1 = document.querySelector('.box2 .option'); // using querySelector here too
let select2 = document.querySelector('.box3 .option');
let select3 = document.querySelector('.box4 .option');
let select4 = document.querySelector('.box5 .option');
let select5 = document.querySelector('.box6 .option');

start.addEventListener('click', function(){
    intro.style.display = 'none';
    box2.style.display = 'block';
})

select1.addEventListener('click', function(){
    box2.style.display = 'none';
    box3.style.display = 'block';
})

select2.addEventListener('click', function(){
    box3.style.display = 'none';
    box4.style.display = 'block';
})

select3.addEventListener('click', function(){
    box4.style.display = 'none';
    box5.style.display = 'block';
})

// Commenting this out because there is no .box5 element in the HTML

// select4.addEventListener('click', function(){
//     box5.style.display = 'none';
//     box6.style.display = 'block';
// })

登录后复制

这段代码首先获取所有需要操作的HTML元素，包括题目div和选项按钮。然后，为每个选项按钮添加点击事件监听器。当点击按钮时，隐藏当前div，显示下一个div。

pollinations

属于你的个性化媒体引擎

231

查看详情

注意: 上述代码中使用了 document.querySelector 方法，它只会返回匹配选择器的第一个元素。这意味着每个题目只有第一个选项按钮会触发切换效果。

改进方案：使用 querySelectorAll

为了解决上述问题，我们需要使用 document.querySelectorAll 方法，它会返回匹配选择器的所有元素。然后，我们可以遍历所有选项按钮，为每个按钮添加点击事件监听器。

const optionButtons = document.querySelectorAll('.option');

optionButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取当前题目div
    const currentQuestion = this.closest('.quest');
    // 隐藏当前题目div
    currentQuestion.style.display = 'none';

    // 获取下一个题目div
    const nextQuestion = currentQuestion.nextElementSibling;

    // 显示下一个题目div
    if (nextQuestion && nextQuestion.classList.contains('quest')) {
      nextQuestion.style.display = 'block';
    } else {
      // 如果没有下一个题目，可以显示完成页面或者其他操作
      alert('Quiz completed!');
    }
  });
});

let start = document.querySelector('#start');
let intro = document.querySelector('.box1');
start.addEventListener('click', function(){
    intro.style.display = 'none';
    document.querySelector('.box2').style.display = 'block';
})

登录后复制

这段代码首先使用 document.querySelectorAll('.option') 获取所有选项按钮。然后，使用 forEach 方法遍历每个按钮，并添加点击事件监听器。在事件处理函数中，使用 this.closest('.quest') 获取当前按钮所在的题目div，并隐藏它。接着，使用 nextElementSibling 获取下一个兄弟元素，并判断它是否是题目div。如果是，则显示下一个题目div。

总结

本文介绍了如何使用HTML和JavaScript实现一个简单的多选题切换Div显示效果。通过监听按钮点击事件，控制不同Div的显示与隐藏，从而实现题目切换的交互效果。同时，针对 querySelector 只能获取第一个匹配元素的问题，提出了使用 querySelectorAll 的解决方案。希望本文能帮助开发者更好地理解和应用JavaScript来实现动态的Web页面交互效果。

以上就是使用HTML和JavaScript实现多选题切换Div显示效果的详细内容，更多请关注php中文网其它相关文章！