网页内动态提问实现：基于用户响应展示内容且不跳转页面

嘿，我刚好做过类似的需求——在当前页面内引导用户完成一系列问答，根据选择展示对应内容，全程不用跳转。下面是一套完整的纯前端实现方案，你可以直接复用或者按需调整：

1. HTML结构设计 #

先把所有问题、对应内容（比如你提到的图形）都写在页面里，默认只显示第一个问题，其他内容都隐藏起来：

<div class="question-container">
  <!-- 问题1 -->
  <div class="question active" id="q1">
    <p>是否想要查看正方形？</p>
    <button class="btn" data-next="q1-yes">是</button>
    <button class="btn" data-next="q2">否</button>
  </div>

  <!-- 问题1的"是"：展示正方形+下一个问题 -->
  <div class="question" id="q1-yes">
    <div class="shape square"></div>
    <p>是否想要红色？</p>
    <button class="btn" data-next="q1-yes-red">是</button>
    <button class="btn" data-next="q3">否</button>
  </div>

  <!-- 红色正方形 -->
  <div class="question" id="q1-yes-red">
    <div class="shape square red"></div>
    <p>是否更喜欢蓝色？</p>
    <button class="btn" data-next="q1-yes-blue">是</button>
    <button class="btn" data-next="end">否</button>
  </div>

  <!-- 蓝色正方形 -->
  <div class="question" id="q1-yes-blue">
    <div class="shape square blue"></div>
    <p>是否更喜欢黄色？</p>
    <button class="btn" data-next="q1-yes-yellow">是</button>
    <button class="btn" data-next="end">否</button>
  </div>

  <!-- 问题2 -->
  <div class="question" id="q2">
    <p>是否想要查看圆形？</p>
    <button class="btn" data-next="q2-yes">是</button>
    <button class="btn" data-next="q3">否</button>
  </div>

  <!-- 问题2的"是"：展示圆形+下一个问题 -->
  <div class="question" id="q2-yes">
    <div class="shape circle"></div>
    <p>是否想要橙色？</p>
    <button class="btn" data-next="q2-yes-orange">是</button>
    <button class="btn" data-next="q4">否</button>
  </div>

  <!-- 橙色圆形 -->
  <div class="question" id="q2-yes-orange">
    <div class="shape circle orange"></div>
    <p>是否更喜欢黄色？</p>
    <button class="btn" data-next="q2-yes-yellow">是</button>
    <button class="btn" data-next="end">否</button>
  </div>

  <!-- 问题3 -->
  <div class="question" id="q3">
    <p>是否想要橙色？</p>
    <button class="btn" data-next="q3-orange">是</button>
    <button class="btn" data-next="q4">否</button>
  </div>

  <!-- 橙色图形（通用） -->
  <div class="question" id="q3-orange">
    <div class="shape square orange"></div>
    <p>是否更喜欢黄色？</p>
    <button class="btn" data-next="q3-yellow">是</button>
    <button class="btn" data-next="end">否</button>
  </div>

  <!-- 问题4 -->
  <div class="question" id="q4">
    <p>是否更喜欢黄色？</p>
    <button class="btn" data-next="q4-yellow">是</button>
    <button class="btn" data-next="end">否</button>
  </div>

  <!-- 黄色图形（通用） -->
  <div class="question" id="q4-yellow">
    <div class="shape circle yellow"></div>
    <p>你选了黄色图形！</p>
    <button class="btn" data-next="end">完成</button>
  </div>

  <!-- 结束页面 -->
  <div class="question" id="end">
    <p>问答结束！感谢你的参与😊</p>
    <button class="btn" data-next="q1">重新开始</button>
  </div>
</div>

2. CSS样式美化 #

给页面加一些基础样式，让问答界面更美观，同时控制内容的显示/隐藏：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.question-container {
  background: white;
  padding: 2.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-width: 450px;
  width: 100%;
}

/* 默认隐藏所有问题，只显示带active类的 */
.question {
  display: none;
  text-align: center;
}

.question.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

/* 图形样式 */
.shape {
  width: 120px;
  height: 120px;
  margin: 1.5rem auto;
  border: 3px solid #333;
  transition: all 0.3s ease;
}

.square {
  border-radius: 6px;
}

.circle {
  border-radius: 50%;
}

.red {
  background-color: #ef4444;
  border-color: #dc2626;
}

.orange {
  background-color: #f97316;
  border-color: #ea580c;
}

.yellow {
  background-color: #eab308;
  border-color: #ca8a04;
}

.blue {
  background-color: #3b82f6;
  border-color: #2563eb;
}

/* 按钮样式 */
.btn {
  margin: 0.6rem;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 6px;
  background-color: #3b82f6;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.btn:hover {
  background-color: #2563eb;
}

/* 淡入动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

3. JavaScript交互逻辑 #

用简单的事件监听实现内容切换，全程在当前页面完成，没有任何跳转：

// 获取所有按钮
const buttons = document.querySelectorAll('.btn');

// 给每个按钮绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 找到当前显示的问题
    const currentActiveQuestion = document.querySelector('.question.active');
    // 获取要切换到的目标问题ID
    const targetQuestionId = button.getAttribute('data-next');
    
    // 隐藏当前问题
    currentActiveQuestion.classList.remove('active');
    // 显示目标问题
    document.getElementById(targetQuestionId).classList.add('active');
  });
});

方案优势 #

• 无跳转体验：用户全程在同一个页面操作，不会被打断，体验更流畅
• 灵活扩展：可以轻松添加更多问题分支，或者修改图形、内容，只要调整HTML和data-next属性就行
• 纯前端实现：不需要后端支持，直接把这三部分代码整合到你的页面里就能用

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