如何用HTML/CSS/JavaScript创建可标记当前剧集的动态剧集列表

没问题！我来帮你实现一个能自动识别并标记当前剧集的动态列表，下面是完整的实现方案，包含HTML、CSS和JavaScript代码，还有详细说明：

先搭建基础的剧集列表，用data-episode属性存储每个剧集的编号，方便后续JS精准识别：

<ul class="episode-list">
  <li data-episode="1">第1集：故事开篇</li>
  <li data-episode="2">第2集：踏上旅程</li>
  <li data-episode="3">第3集：神秘邂逅</li>
  <li data-episode="4">第4集：解谜时刻</li>
  <li data-episode="5">第5集：终章序幕</li>
</ul>

给列表和active类设置样式，让当前剧集高亮显示，同时优化交互体验：

.episode-list {
  list-style: none;
  padding: 0;
  max-width: 400px;
  margin: 2rem auto;
  font-family: Arial, sans-serif;
}

.episode-list li {
  padding: 12px 18px;
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: #f3f4f6;
  cursor: pointer;
  transition: all 0.2s ease;
}

.episode-list li:hover {
  background-color: #e5e7eb;
}

.episode-list li.active {
  background-color: #3b82f6;
  color: white;
  font-weight: 600;
}

核心功能是识别当前剧集并添加active类，同时支持点击切换当前剧集：

// 两种方式设置当前剧集，选一种即可：
// 方式1：手动指定（适合测试或固定场景）
// let currentEpisode = 3;

// 方式2：从URL参数获取（更灵活，比如页面链接为 ?episode=4）
const urlParams = new URLSearchParams(window.location.search);
let currentEpisode = parseInt(urlParams.get('episode')) || 1; // 默认选中第1集

// 获取所有剧集列表项
const episodeItems = document.querySelectorAll('.episode-list li');

// 初始化标记当前剧集
episodeItems.forEach(item => {
  const episodeNum = parseInt(item.dataset.episode);
  
  // 匹配当前剧集，添加active类
  if (episodeNum === currentEpisode) {
    item.classList.add('active');
  }

  // 点击切换当前剧集
  item.addEventListener('click', () => {
    // 先移除所有项的active类
    episodeItems.forEach(i => i.classList.remove('active'));
    // 给当前点击的项添加active类
    item.classList.add('active');
    // 更新当前剧集变量
    currentEpisode = episodeNum;
    // 可选：更新URL参数，刷新页面后仍能保持选中状态
    window.history.pushState({}, '', `?episode=${currentEpisode}`);
  });
});

• 页面加载时，会自动匹配currentEpisode对应的剧集，给它加上active类高亮显示
• 点击任意剧集项，会自动切换active类的归属，同时更新URL参数（可选功能），刷新页面后仍能记住用户选中的剧集
• 样式上做了过渡效果和hover状态，交互体验更流畅

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