需求说明：
制作四个选项卡页 Tab，用户可以通过切换不同的 Tab 页查看不同类别的新闻信息，每个 Tab 有对应的内容版块，点击某个选项卡时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的选项卡，还可以设置其背景样式
实现思路：
编写 HTML 页面，在页面中添加 Tab、内容版块，以及对应的 CSS 样式
为每个 Tab 元素添加点击事件，并将 Tab 元素的位置作为参数值传入
在 JavaScript 脚本中创建点击事件的处理函数
通过 document 对象找到对应的 Tab 元素及版块内容，并修改其样式
使用浏览器预览效果
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> h2{ border-top: solid blue 1px; border-left: solid blue 1px; border-bottom: solid blue 1px; width: 100px; height: 35px; margin: 0; float: left; text-align: center; } .tab-content{ margin-top: 10px; border: solid blue 1px; width: 402px; height: 400px; } .tab-content div{ display: none; } .current{ background-color: pink; } .tab-content .show{ display: block; } </style> </head> <body> <div class="tab-head"> <h2 class="current" onclick="changeTab(0)">热点</h2> <h2 onclick="changeTab(1)">娱乐</h2> <h2 onclick="changeTab(2)">段子</h2> <h2 onclick="changeTab(3)">体育</h2> </div> <div class="tab-content"> <div class="show">本页面内容显示热点新闻</div> <div>本页面内显示娱乐新闻</div> <div>本页面内显示搞笑段子</div> <div>本页面内显示体育新闻</div> </div> <script type="text/javascript"> var tabs = document.getElementsByClassName("tab-head")[0].getElementsByTagName("h2"); var contents = document.getElementsByClassName("tab-content")[0].getElementsByTagName("div"); function changeTab(index){ for (var i=0;i<tabs.length;i++) { if (i==index) { tabs[i].className="current"; contents[i].className="show"; } else{ tabs[i].className=""; contents[i].className=""; } } } </script> </body> </html>
