动态为侧边栏添加可点击按钮/链接问题求助（JS测验网站）

嘿，我来帮你搞定这个侧边栏动态生成的问题！针对你的JS测验网站需求，其实用链接（<a>标签）或者按钮都能实现，不过从语义化角度来说，链接更适合跳转类的操作，当然按钮配合点击事件也完全没问题，我给你两种方案的代码参考，你可以根据自己的样式需求选。

方案一：动态生成跳转链接（语义化优先） #

这种方案直接利用<a>标签的跳转特性，不需要额外绑定点击事件，适合简单的锚点跳转场景：

// 先定义你的题目列表，这里示例生成10个题目，你可以替换成实际的题目数据
const questions = Array.from({length: 10}, (_, i) => `Question ${i+1}`);
// 获取侧边栏容器
const sidenav = document.getElementById('mySidenav');

// 遍历题目列表，逐个生成链接
questions.forEach((questionText, index) => {
  const questionLink = document.createElement('a');
  questionLink.textContent = questionText;
  // 设置跳转目标：假设每个题目区域的id是question-1、question-2...
  questionLink.href = `#question-${index+1}`;
  // 添加类名方便后续样式控制
  questionLink.classList.add('question-nav-link');
  // 把链接添加到侧边栏里
  sidenav.appendChild(questionLink);
});

注意事项：

• 要确保你的每个题目区域都有对应的id，比如<div id="question-1">第1题内容</div>，这样点击链接才能精准跳转到对应位置；
• 如果是多页面的测验网站，也可以把href改成具体的页面路径，比如question-${index+1}.html。

方案二：动态生成按钮（样式自定义更灵活） #

如果想要更灵活的样式或交互反馈（比如点击动画），用按钮配合点击事件会更方便：

const questions = Array.from({length: 10}, (_, i) => `Question ${i+1}`);
const sidenav = document.getElementById('mySidenav');

questions.forEach((questionText, index) => {
  const questionBtn = document.createElement('button');
  questionBtn.textContent = questionText;
  // 添加类名控制样式
  questionBtn.classList.add('question-nav-btn');
  // 绑定点击跳转事件
  questionBtn.addEventListener('click', () => {
    // 平滑滚动到对应题目区域
    document.getElementById(`question-${index+1}`).scrollIntoView({behavior: 'smooth'});
    // 如果是跳转页面的话，替换成下面这行：
    // window.location.href = `question-${index+1}.html`;
  });
  sidenav.appendChild(questionBtn);
});

通用样式参考（可选） #

不管用哪种方案，你都可以通过CSS美化侧边栏的元素，比如：

/* 链接和按钮通用样式 */
.question-nav-link, .question-nav-btn {
  padding: 8px 8px 8px 32px;
  font-size: 20px;
  color: #818181;
  display: block;
  transition: 0.3s;
  text-decoration: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* hover效果 */
.question-nav-link:hover, .question-nav-btn:hover {
  color: #f1f1f1;
}

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