久久久久国产一区二区,国产成人综合在线观看不卡

使用HTML和JavaScript實(shí)現(xiàn)多選題切換Div顯示效果

DDD

發(fā)布： 2025-10-18 12:46:29

原創(chuàng)

890人瀏覽過

使用html和javascript實(shí)現(xiàn)多選題切換div顯示效果

本文旨在指導(dǎo)開發(fā)者如何使用HTML和JavaScript實(shí)現(xiàn)一個(gè)簡單的多選題切換Div顯示效果。通過監(jiān)聽按鈕點(diǎn)擊事件，控制不同Div的顯示與隱藏，從而實(shí)現(xiàn)題目切換的交互效果。文章將提供詳細(xì)的代碼示例和解釋，并針對常見問題提供解決方案。

HTML結(jié)構(gòu)

首先，我們需要?jiǎng)?chuàng)建HTML結(jié)構(gòu)，使用多個(gè)div元素來表示不同的題目。每個(gè)div包含題目內(nèi)容和多個(gè)選項(xiàng)按鈕。

<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>

登錄后復(fù)制

每個(gè)題目div都具有唯一的類名（如box2、box3等），選項(xiàng)按鈕也具有相同的類名option。

JavaScript實(shí)現(xiàn)

接下來，使用JavaScript來實(shí)現(xiàn)點(diǎn)擊選項(xiàng)按鈕后切換div顯示的效果。

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

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';
// })

登錄后復(fù)制

這段代碼首先獲取所有需要操作的HTML元素，包括題目div和選項(xiàng)按鈕。然后，為每個(gè)選項(xiàng)按鈕添加點(diǎn)擊事件監(jiān)聽器。當(dāng)點(diǎn)擊按鈕時(shí)，隱藏當(dāng)前div，顯示下一個(gè)div。

火龍果寫作

用火龍果，輕松寫作，通過校對、改寫、擴(kuò)展等功能實(shí)現(xiàn)高質(zhì)量內(nèi)容生產(chǎn)。

106

查看詳情

注意: 上述代碼中使用了 document.querySelector 方法，它只會(huì)返回匹配選擇器的第一個(gè)元素。這意味著每個(gè)題目只有第一個(gè)選項(xiàng)按鈕會(huì)觸發(fā)切換效果。

改進(jìn)方案：使用 querySelectorAll

為了解決上述問題，我們需要使用 document.querySelectorAll 方法，它會(huì)返回匹配選擇器的所有元素。然后，我們可以遍歷所有選項(xiàng)按鈕，為每個(gè)按鈕添加點(diǎn)擊事件監(jiān)聽器。

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

optionButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 獲取當(dāng)前題目div
    const currentQuestion = this.closest('.quest');
    // 隱藏當(dāng)前題目div
    currentQuestion.style.display = 'none';

    // 獲取下一個(gè)題目div
    const nextQuestion = currentQuestion.nextElementSibling;

    // 顯示下一個(gè)題目div
    if (nextQuestion && nextQuestion.classList.contains('quest')) {
      nextQuestion.style.display = 'block';
    } else {
      // 如果沒有下一個(gè)題目，可以顯示完成頁面或者其他操作
      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';
})

登錄后復(fù)制

這段代碼首先使用 document.querySelectorAll('.option') 獲取所有選項(xiàng)按鈕。然后，使用 forEach 方法遍歷每個(gè)按鈕，并添加點(diǎn)擊事件監(jiān)聽器。在事件處理函數(shù)中，使用 this.closest('.quest') 獲取當(dāng)前按鈕所在的題目div，并隱藏它。接著，使用 nextElementSibling 獲取下一個(gè)兄弟元素，并判斷它是否是題目div。如果是，則顯示下一個(gè)題目div。

總結(jié)

本文介紹了如何使用HTML和JavaScript實(shí)現(xiàn)一個(gè)簡單的多選題切換Div顯示效果。通過監(jiān)聽按鈕點(diǎn)擊事件，控制不同Div的顯示與隱藏，從而實(shí)現(xiàn)題目切換的交互效果。同時(shí)，針對 querySelector 只能獲取第一個(gè)匹配元素的問題，提出了使用 querySelectorAll 的解決方案。希望本文能幫助開發(fā)者更好地理解和應(yīng)用JavaScript來實(shí)現(xiàn)動(dòng)態(tài)的Web頁面交互效果。

以上就是使用HTML和JavaScript實(shí)現(xiàn)多選題切換Div顯示效果的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標(biāo)簽：