制作四个选项卡页 Tab，用户可以通过切换不同的 Tab 页查看不同类别的新闻信息，每个 Tab 有对应的内容版块，点击某个选项卡时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的选项卡，还

查看本章节

查看作业目录

需求说明：

制作四个选项卡页 Tab，用户可以通过切换不同的 Tab 页查看不同类别的新闻信息，每个 Tab 有对应的内容版块，点击某个选项卡时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的选项卡，还可以设置其背景样式

实现思路：

1. 编写 HTML 页面，在页面中添加 Tab、内容版块，以及对应的 CSS 样式
2. 为每个 Tab 元素添加点击事件，并将 Tab 元素的位置作为参数值传入
3. 在 JavaScript 脚本中创建点击事件的处理函数
4. 通过 document 对象找到对应的 Tab 元素及版块内容，并修改其样式
5. 使用浏览器预览效果

实现代码：