目录
选择尺寸
选择数量显示价格
评分
效果图
Jquery：
$(function () { $(".pro_size li").click(function () { var size = $(this).index(); if (size == "0") { $(".pro_size strong").text("S"); } if (size == "1") { $(".pro_size strong").text("L"); } if (size == "2") { $(".pro_size strong").text("SL"); } if (size == "3") { $(".pro_size strong").text("LL"); } }) })CSS：
.pro_detail_right .pro_size { width:380px; font-weight:bold; float:left; display:inline; margin-bottom:10px; } .pro_detail_right .pro_size ul li{ float:left; margin-right:5px; } .pro_detail_right .pro_size ul li span{ display:block; margin-right:6px; padding:1px 12px; border:1px solid #AAA; cursor:pointer; } .pro_detail_right .pro_size ul li span:hover { background:#CCC; }Html：
<div class="pro_detail_right"> <div class="pro_size"> 尺寸：<strong>未选择</strong> <ul> <li><span>S</span></li> <li><span>L</span></li> <li><span>SL</span></li> <li><span>LL</span></li> </ul> </div> </div>
效果图
Jquery
$(function () { $("select").click(function () { var num = $("option:selected").val(); $(".pro_price span").text(num * 200); }) })CSS
.pro_detail_right .pro_num { width:380px; font-weight:bold; float:left; display:inline; margin-bottom:10px; } .pro_detail_right .pro_price { width:380px; font-weight:bold; float:left; display:inline; margin-bottom:10px; }Html
<div class="pro_detail_right"> <div class="pro_num"> 数量： <select id="num_sort" style="width:40px;" > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="pro_price"> 总计：<span>200</span>元 </div> </div>
效果图
Jquery
$(function () { $(".rating li a").click(function () { var title = $(this).attr("title"); alert("你给出的评分是" + title); var cl = $(this).parent().attr("class"); $(this).parent().parent().removeClass().addClass("rating " + cl + "star"); }); })CSS
图片
用的精灵图
.pro_detail_right .pro_rating { width:380px; font-weight:bold; float:left; display:inline; margin-bottom:10px; } /* 评分css */ .rating{ width:80px; height:16px; margin:0 0 20px 0; padding:0; list-style:none; clear:both; position:relative; background: url(../images/star-matrix.gif) no-repeat 0 0; } .nostar {background-position:0 0} .onestar {background-position:0 -16px} .twostar {background-position:0 -32px} .threestar {background-position:0 -48px} .fourstar {background-position:0 -64px} .fivestar {background-position:0 -80px} ul.rating li { cursor: pointer; float:left; text-indent:-999em; } ul.rating li a { position:absolute; left:0; top:0; width:16px; height:16px; text-decoration:none; z-index: 200; } ul.rating li.one a {left:0} ul.rating li.two a {left:16px;} ul.rating li.three a {left:32px;} ul.rating li.four a {left:48px;} ul.rating li.five a {left:64px;} ul.rating li a:hover { z-index:2; width:80px; height:16px; overflow:hidden; left:0; background: url(../images/star-matrix.gif) no-repeat 0 0 } ul.rating li.one a:hover {background-position:0 -96px;} ul.rating li.two a:hover {background-position:0 -112px;} ul.rating li.three a:hover {background-position:0 -128px} ul.rating li.four a:hover {background-position:0 -144px} ul.rating li.five a:hover {background-position:0 -160px}
Html
<div class="pro_detail_right"> <div class="pro_rating"> 给商品评分： <ul class="rating nostar"> <li class="one"><a href="#" title="1分">1</a></li> <li class="two"><a href="#" title="2分">2</a></li> <li class="three"><a href="#" title="3分">3</a></li> <li class="four"><a href="#" title="4分">4</a></li> <li class="five"><a href="#" title="5分">5</a></li> </ul> </div> <div id="cart"> <a href="#"><img src="images/btn_cart.png"/></a> </div> </div>
