新手开发求助：如何基于单选框选择显示带CSS样式的文本并跳转？

Hey there! 作为前端新手遇到这种卡壳的情况太正常啦，别着急，我来帮你捋捋怎么实现这个功能～

首先咱们得先确保HTML结构是正确的，单选按钮需要共享同一个name属性才能实现互斥选择，同时给每个按钮设置清晰的value来区分选项：

<ul>
  <li>
    <input type="radio" name="questionOption" id="optionA" value="optionA">
    <label for="optionA">选项A：关于XX的问题</label>
  </li>
  <li>
    <input type="radio" name="questionOption" id="optionB" value="optionB">
    <label for="optionB">选项B：关于YY的问题</label>
  </li>
</ul>

<!-- 如果是在当前页面显示内容，需要一个容器 -->
<div id="questionContent"></div>

接下来分两种场景给你写实现代码：

场景1：选择后跳转至对应页面 #

给每个单选按钮绑定change事件，当选中时根据value跳转到指定页面：

// 获取所有同组的单选按钮
const radioButtons = document.querySelectorAll('input[name="questionOption"]');

radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // 确认当前单选按钮被选中
    if (this.checked) {
      // 根据value跳转对应页面，比如value是optionA就跳转到optionA.html
      window.location.href = `${this.value}.html`;
    }
  });
});

场景2：选择后在当前页面显示对应内容 #

如果不需要跳转页面，而是直接在当前页面展示相关问题，可以这么写：

const radioButtons = document.querySelectorAll('input[name="questionOption"]');
// 获取用来展示内容的容器
const contentBox = document.getElementById('questionContent');

radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.checked) {
      // 根据选中的value切换显示的内容
      switch(this.value) {
        case 'optionA':
          contentBox.innerHTML = `
            <h4>选项A的相关问题</h4>
            <p>1. XX功能的具体使用方法是什么？</p>
            <p>2. XX场景下需要注意哪些细节？</p>
          `;
          break;
        case 'optionB':
          contentBox.innerHTML = `
            <h4>选项B的相关问题</h4>
            <p>1. YY功能支持哪些参数？</p>
            <p>2. YY的兼容性如何？</p>
          `;
          break;
        default:
          contentBox.innerHTML = '';
      }
    }
  });
});

几个关键注意点： #

• 单选按钮的name属性必须完全一致，不然无法实现“选一个就取消另一个”的互斥效果
• value属性要设置成容易识别的内容，方便后续JS判断
• 如果是跳转页面，要确保目标页面的路径正确（比如和当前HTML文件在同一目录下，直接写文件名就行）
• 如果是显示内容，提前在HTML里准备好内容容器，避免找不到元素报错

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