如何在主HTML检测选中按钮并在另一HTML页面加载对应测验类别题目？

一、页面间传递选中的类别 #

要实现主页面选类别后跳转到答题页展示对应题目，核心是把选中的类别信息从主页面传递到答题页，常用两种方式：

1. 通过URL参数传递 #

这种方式的优点是用户可以直接分享答题链接，其他人打开后会进入同一类别的测验，适合需要分享的场景。

主页面（index.html）代码：

<!DOCTYPE html>
<html>
<head>
    <title>选择测验类别</title>
</head>
<body>
    <h1>选择测验类别</h1>
    <button class="category-btn" data-category="html">HTML</button>
    <button class="category-btn" data-category="css">CSS</button>
    <button class="category-btn" data-category="javascript">JavaScript</button>

    <script>
        const categoryBtns = document.querySelectorAll('.category-btn');
        
        categoryBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // 获取选中的类别（用data属性存储类别标识）
                const selectedCategory = btn.dataset.category;
                // 跳转到答题页并带上类别参数
                window.location.href = `quiz.html?category=${selectedCategory}`;
            });
        });
    </script>
</body>
</html>

2. 通过localStorage存储 #

这种方式把类别信息存在浏览器本地，不会暴露在URL里，适合不需要分享链接的场景，用完记得清除避免残留。

主页面修改部分代码：

categoryBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        const selectedCategory = btn.dataset.category;
        // 存储选中的类别
        localStorage.setItem('selectedQuizCategory', selectedCategory);
        window.location.href = 'quiz.html';
    });
});

二、答题页加载对应类别题目 #

答题页需要先获取传递过来的类别，再加载对应题目数据，然后依次展示题目。

答题页（quiz.html）代码：

<!DOCTYPE html>
<html>
<head>
    <title>测验答题</title>
</head>
<body>
    <div id="question-container">
        <h2 id="question-text"></h2>
        <div id="answers-container"></div>
        <button id="next-btn" style="display:none;">下一题</button>
    </div>

    <script>
        // 模拟不同类别的题目数据，实际可以从后端接口获取
        const quizQuestions = {
            html: [
                {
                    question: "HTML的全称是什么？",
                    answers: ["Hyper Text Markup Language", "High Tech Modern Language", "Hyperlinks and Text Markup Language"],
                    correct: 0
                },
                {
                    question: "<p>标签的作用是什么？",
                    answers: ["定义段落", "定义标题", "定义链接"],
                    correct: 0
                }
            ],
            css: [
                {
                    question: "CSS的全称是什么？",
                    answers: ["Cascading Style Sheets", "Computer Style Sheets", "Creative Style Sheets"],
                    correct: 0
                }
            ],
            javascript: [
                {
                    question: "JavaScript中用于声明变量的关键字是？",
                    answers: ["var", "let", "const", "以上都是"],
                    correct: 3
                }
            ]
        };

        let currentQuestionIndex = 0;
        let selectedCategory;

        // ------------------- 获取类别（二选一） -------------------
        // 方式1：从URL参数获取
        const urlParams = new URLSearchParams(window.location.search);
        selectedCategory = urlParams.get('category');

        // 方式2：从localStorage获取并清除
        // selectedCategory = localStorage.getItem('selectedQuizCategory');
        // localStorage.removeItem('selectedQuizCategory');
        // ----------------------------------------------------------

        // 初始化展示第一题
        if (selectedCategory && quizQuestions[selectedCategory]) {
            showQuestion(quizQuestions[selectedCategory][currentQuestionIndex]);
        } else {
            document.getElementById('question-text').textContent = "无效的类别，请返回重新选择";
        }

        // 展示单道题目的函数
        function showQuestion(question) {
            const questionText = document.getElementById('question-text');
            const answersContainer = document.getElementById('answers-container');
            const nextBtn = document.getElementById('next-btn');

            // 清空之前的内容
            questionText.textContent = question.question;
            answersContainer.innerHTML = '';
            nextBtn.style.display = 'none';

            // 创建选项按钮
            question.answers.forEach((answer, index) => {
                const answerBtn = document.createElement('button');
                answerBtn.textContent = answer;
                answerBtn.addEventListener('click', () => {
                    // 这里可添加对错判断逻辑，比如高亮正确选项
                    nextBtn.style.display = 'block';
                });
                answersContainer.appendChild(answerBtn);
            });

            // 下一题按钮逻辑
            nextBtn.onclick = () => {
                currentQuestionIndex++;
                if (currentQuestionIndex < quizQuestions[selectedCategory].length) {
                    showQuestion(quizQuestions[selectedCategory][currentQuestionIndex]);
                } else {
                    questionText.textContent = "测验完成！";
                    answersContainer.innerHTML = '';
                    nextBtn.style.display = 'none';
                }
            };
        }
    </script>
</body>
</html>

三、关于主页面按钮选中检测与跨页操作 #

主页面通过给按钮绑定click事件，就能检测到用户选中了哪个按钮，然后把选中的类别信息传递到答题页——答题页拿到这个信息后，就可以执行加载对应类别题目、展示第一题等操作，本质是通过数据传递实现跨页的逻辑关联，上面的两种传递方式已经覆盖了这个需求。

内容的提问来源于stack exchange，提问作者Aldi Rapaj