作业要求：
参考下图，点击展示不同内容。
例：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ???????????margin: 0; ???????} ???????.header{ ???????????background-color: whitesmoke; ???????????width: 100%; ???????????height: 50px; ???????????border-bottom: 2px solid red; ???????????position: relative; ???????} ???????.action { ???????????height: 50px; ???????????color: #696969; ???????????font-size: 22px; ???????????font-weight: 200; ???????????line-height: 50px; ???????????padding: 1px 30px 1px 30px; ???????} ????????.shopping_car a{ ????????????text-decoration: none; ????????????height: 50px; ????????????color: white; ????????????font-size: 13px; ????????????font-weight: 200; ????????????padding: 0px 15px 0 15px; ????????????background-color: ????#ee0f23; ????????????line-height: 50px; ????????????position: absolute; ????????????left:1500px; ????????????top:0px; ???????} ????????.img_cont img{ ????????????margin-top: 52px; ????????} ???????.a1 { ???????????position: absolute; ???????????left:0; ???????????top:0; ???????} ???????.a2{ ???????????position: absolute; ???????????left:150px; ???????????top:0; ???????} ???????.a3{ ??????????position: absolute; ???????????left:300px; ???????????top:0; ???????} ???????.a4{ ??????????position: absolute; ???????????left:450px; ???????????top:0; ???????} ???????.a5{ ??????????position: absolute; ???????????left:680px; ???????????top:0; ???????} ???????.hide{ ???????????display: none; ???????} ???????.change { ???????????background-color: ????#ee0f23; ???????????color: #F5F5F5; ???????} ???</style></head><body> ???<script src="jquery-3.2.1.min.js"></script> ???<div class="header"> ???????<div class="item"> ???????????<div class="action a1">商品介绍</div> ???????????<div class="img_cont hide"> ???????????????????<img src="商品介绍.jpg" alt=""> ???????????</div> ????????</div> ???????<div class="item"> ???????????<div class="action a2">规格与包装</div> ???????????<div class="img_cont hide"> ???????????????????<img src="规格包装.jpg" alt=""> ???????????</div> ????????</div> ???????<div class="item"> ???????????<div class="action a3">售后保障</div> ???????????<div class="img_cont hide"> ???????????????????<img src="售后保障.jpg" alt=""> ???????????</div> ????????</div> ???????<div class="item"> ???????????<div class="action a4">商品评价(3.8万+)</div> ???????????<div class="img_cont hide"> ???????????????????<img src="商品评价.jpg" alt=""> ???????????</div> ????????</div> ???????<div class="item"> ???????????<div class="action a5">社区互动</div> ???????????<div class="img_cont hide"> ???????????????????<img src="社区互动.jpg" alt=""> ???????????</div> ????????</div> ???????<span class="shopping_car"> ???????????<a href="">加入购物车</a> ???????</span> ???</div> ???<script> ???????$(".action ").click(function () { ???????????$(this).addClass("change"); ???????????$(this).next().removeClass("hide"); ???????????$(this).parent().siblings().children(".action").removeClass("change"); ???????????$(this).parent().siblings().children(".img_cont").addClass("hide"); ????}) ???</script></body></html>【练习】jQuery
原文地址：https://www.cnblogs.com/smallmars/p/8117183.html