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

HTML结构

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

    
Awesome Quiz
    
Trivia Time ??!!!
    Start


    
Awesome Quiz
    
Who was the first President of the United States?
立即学习“Java免费学习笔记（深入）”；

    
George Washington
    SELECT ANSWER
    
Thomas Jefferson
    SELECT ANSWER
    
Thomas Edinson
    SELECT ANSWER
    
I don't Know
    SELECT ANSWER
    

        
Question 1 of 5
    


    
Awesome Quiz
    
What is Queen Elizabeth II's surname?

    
Jason
    SELECT ANSWER
    
Windsor
    SELECT ANSWER
    
Drakeford
    SELECT ANSWER
    
William

							

								
								

									考拉新媒体导航
									
考拉新媒体导航——新媒体人的专属门户网站
								
								下载 
							
						
    SELECT ANSWER
    

        
Question 2 of 5
    


    
Awesome Quiz
    
What is the largest country in the world?

    
Russia
    SELECT ANSWER
    
Canada
    SELECT ANSWER
    
India
    SELECT ANSWER
    
South Africa
    SELECT ANSWER
    

        
Question 3 of 5
    

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

JavaScript实现

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

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。

注意: 上述代码中使用了 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页面交互效果。