实验17 商品Tab状态与内容同步

黄梅戏主题教学练习。插画为自制示意，演出、商品与评价均为虚构，无真实交易或个人信息收集。

第17次课 · 大纲项目13 · 综合设计型 · 必做 · 每组1人 · 本次2学时

这个页面用来做什么？

读者切换商品详情时，按钮的选中外观、状态与内容保持同步，刷新后恢复默认介绍。

项目十三第2次课；普通按钮语义保持清楚，完整ARIA tabs键盘模式不是必做。

已有内容： HTML基本结构、基础排版与本地素材。 你要完成： 统一更新三种状态、绑定并初始化、展示选中反馈。

先完整解压，复制起始项目并命名“实验17-大数据-24级-1班-张三-学号”，替换为本人实际信息。用VS Code编辑、浏览器打开index.html；Ctrl+F搜索BEGIN加区域名，只在对应BEGIN/END之间编写。报告另填report.html。

本次文字与数据 · 素材使用说明 · 打开起始页面 · 报告模板

任务路线

T1 统一更新三种状态
修改位置
app.js：搜索BEGIN TAB-STATE。
做什么
按intro/spec/review建立按钮与面板数组；activate(index)遍历，同步selected类、aria-pressed和hidden。
怎样判断完成
恰好一个选中按钮与一个可见面板，三者一致。
T2 绑定并初始化
修改位置
app.js：搜索BEGIN TAB-INIT。
做什么
每个按钮绑定自己的索引，首次调用activate(0)。反复切换与刷新核对默认状态。
怎样判断完成
首次介绍选中；任意切换、重复点击、刷新均一致。
T3 展示选中反馈
修改位置
lesson.css：搜索BEGIN TAB-STYLE。
做什么
selected按钮使用深色底白字和底部边框，保留键盘焦点轮廓。
怎样判断完成
当前项可辨认，焦点与选中概念不混淆。

目标效果图片

看图理解页面结构，按任务独立编写。图片不是可复制源码，也不能代替本人结果截图。

本次参考页面目标效果，完整要求见任务路线

操作检查与报告证据

  1. 依次切换三个按钮再逆序切换，每次仅一个面板。
  2. 刷新后恢复介绍；重复点击不增删面板。
  3. 键盘Tab/Enter/空格均可用；完整方向键tabs模式为选做。

将实际结果写入report.html的R1—R3；R4插入本人截图（完成状态、关键变化状态各一张）。静态页面可用桌面与窄屏图；动画还要文字记录暂停/恢复，截图不能证明动画运行。报告可课后整理，截止由教师公布。

评分与提交

本次100分
项目 分值 依据
核心任务 60 按任务卡完成标准评分；每项分值见教师指南，学生可按任务逐项自查。
实际验证 20 检查记录10分，问题修复或正确性解释10分。
报告与提交 20 报告及截图10分，命名/完整文件/可读代码10分。

核心任务分配：T1 20分；T2 20分；T3 20分。选做不影响满分。

提交本人项目ZIP：实验17-大数据-24级-1班-张三-学号.zip。包含HTML、CSS、需要的JS、assets、report.html和screenshots；保留来源说明，不提交教师目录或整份素材库。源码两空格缩进，属性双引号。

本学期考核：2024级平时20%／期中20%／期末60%；2025级40%／20%／40%。第10次正常实验产出计入期中，不另加考试。本次100分是作业分，不是总评占比。

选做：可在掌握本课后扩展完整ARIA tabs模式及方向键；不得只加role而不实现对应键盘行为。

附录：知识点名称与作用

标签、属性或API 英文名称/展开 作用
classList.toggle class list toggle 切换类名
forEach for each 遍历数组
aria-pressed ARIA pressed 按钮状态
hidden hidden 内容显示状态

若使用AI，记录问题、采用的建议、本人修改与验证；未使用则如实填写。不能以生成代码成功替代浏览器检查。