abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿天貓商城點擊選中商品效果</title> &n
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿天貓商城點擊選中商品效果</title>
<link rel="shortcut icon" href="static/images/logo.png" type="image/x-icon" />
<link rel="stylesheet" href="static/css/style.css" type="text/css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('span').click(function(){
if($(this).hasClass('check')){
$(this).removeClass('check')
}else{
$(this).addClass('check').siblings('span').removeClass('check')
}
})
})
</script>
</head>
<body>
<div class="top">請選擇信息后加入購物車</div>
<div class="main">
<p class="p1">
<b style="border:0px;">版本</b>
<span id="sp0" class="ed" name="0">ONE A2001</span>
<span id="sp1" class="ed" name="0">ONE A0001</span>
<span id="sp2" class="ed" name="0">ONE A1001</span>
</p>
<p class="p2">
<b style="border:0px;">機身顏色</b>
<span id="sp3" class="co" name="0">白色</span>
<span id="sp4" class="co" name="0">黑色</span>
<span id="sp5" class="co" name="0">金色</span>
</p>
<p class="p3">
<b style="border:0px;">套餐類型</b>
<span id="sp6" class="pa" name="0">標配</span>
<span id="sp7" class="pa" name="0">套餐一</span>
<span id="sp8" class="pa" name="0">套餐二</span>
</p>
<p class="p4">
<b style="border:0px;">運行內存</b>
<span id="sp9" class="ru" name="0">2GB</span>
<span id="sp10" class="ru" name="0">3GB</span>
<span id="sp11" class="ru" name="0">4GB</span>
</p>
<p class="p5">
<b style="border:0px;">機身內存</b>
<span id="sp12" class="me" name="0">16GB</span>
<span id="sp13" class="me" name="0">32GB</span>
<span id="sp14" class="me" name="0">64GB</span>
</p>
<p class="p6">
<b style="border:0px;">產地</b>
<span id="sp15" class="ad" name="0">中國大陸</span>
<span id="sp15" class="ad" name="0">港澳臺</span>
</p>
<p class="p7">
<b style="border:0px;">價格</b>
<span id="sp15" class="ad" name="0">999元搶購</span>
</p>
<p class="p8">
<b style="border:0px;">數量</b>
<input type="text" value="1" style="width:40px;height:26px;">
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1">加入購物車</button>
<button class="bu2">打開購物車</button>
</p>
</div>
<div class="shopCar">
<li style="font-size:14px;background: #C40000;color: white;">您所選商品信息如下：</li>
<div class="sright">
</div>
<div class="kong" style="background:#ccc;width:100%;height:7px;display:none"></div>
<button class="bu3" style="width:80px;height:35px;margin-left:20px;">隱藏購物車</button>
<button class="bu4" style="width:80px;">清空購物車</button>
</div>
</body>
</html>* {
margin: 0px auto;
padding: 0px;
}
.top {
width: 400px;
height: 35px;
line-height: 35px;
text-align: center;
margin-top: 50px;
border: 1px solid red;
border-bottom: 0px;
background: #C40000;
color: white;
}
.main {
width: 400px;
height: 400px;
border: 1px solid red;
}
p {
width: 400px;
height: 26px;
margin-top: 10px;
}
b {
width: 90px;
height: 26px;
line-height: 26px;
text-align: center;
font-size: 12px;
color: #838383;
border: 1px solid #ccc;
display: block;
float: left;
margin-left: 5px;
}
span {
width: 90px;
height: 26px;
line-height: 26px;
text-align: center;
font-size: 12px;
color: #838383;
border: 1px solid #ccc;
display: block;
float: left;
margin-left: 5px;
}
span:hover {
cursor: pointer;
}
button {
width: 120px;
height: 35px;
background: #C40000;
color: white;
border: 0px;
}
button:hover {
cursor: pointer;
}
.shopCar {
width: 200px;
border: 1px solid red;
position: absolute;
top: 50px;
right: -200px;
}
li {
width: 200px;
height: 26px;
line-height: 26px;
margin: 5px auto;
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: white;
}
h4 {
width: 100%;
text-align: center;
}
.check {
width: 88px;
height: 24px;
line-height: 24px;
border: 2px solid red;
color: red;
}
.change {
width: 200px;
height: 220px;
border: 1px solid red;
background: yellow;
}
.sc {
width: 30px;
height: 20px;
font-size: 10px;
position: relative;
top: 25px;
right: 0px;
float: right;
}總結：可以通過添加類樣式的方式，動態(tài)改變元素的樣式，達到點擊選中的效果。通過這
個案例，鞏固了html,css和jquery的知識。比較實用。
Correcting teacher：天蓬老師Correction time：2018-12-11 11:20:55
Teacher's summary：很不錯, 前端頁面, 講的就是客戶體驗