现如今，我们浏览电商网站的产品页面时，常常会看到产品的规格和价格展示，不同的规格对应不同的价格，比如本站的热销主题页面，点击规格后显示对应的价格，实现的方法非常简单，于是写了一个响应式的示例页面，来展示价格随着规格进行切换。
效果预览：
jquery代码：
$(function(){
$(".proname a:first-child").addClass("on");
$(".proname a").click(function(){
$(this).addClass("on").siblings().removeClass("on");
$dataprice = $(this).attr("data-price");
$(this).parent().next().children("span").text($dataprice);
return false;
});
$(".proprice").each(function(){
$firstattr = $(this).prev().find("a:first").attr("data-price");
$(this).find("span").text($firstattr);
});
});
CSS代码：
*,body { margin:0; padding:0; }
body { font-size:14px; color:#333; font-family:arial,"microsoft yahei"; }
ul { list-style:none; }
a { color:#004c98; text-decoration:none; }
.protitle { width:1018px; margin:100px auto 20px; padding-bottom:10px; font:24px/38px "microsoft yahei"; text-align:center; }
.protitle p { font:12px/18px "microsoft yahei"; color:#999; text-transform:uppercase; }
.pro { width:1018px; margin:0 auto; padding:22px 0; border:1px solid #ebebeb; box-shadow:0 0 1px 0 rgba(0,0,0,.1); background:#fff; overflow:hidden; }
.pro ul li { width:270px; float:left; margin-left:22px; padding:20px; background:#f8f8f8; }
.pro li p { line-height:30px; }
.proname { margin-bottom:20px; }
.proname a { margin:0 5px 5px 0; padding:0 20px; line-height:24px; border:1px solid #004c98; display:inline-block; }
.proname a.on { color:#fff; border-color:#004c98; background:#004c98; }
.proprice { color:#333; line-height:30px; border-top:1px solid #ddd; }
.proprice span { color:#333; font-weight:600; }
.copyright { width:1018px; margin:50px auto 0; padding-top:10px; font-size:12px; color:#666; text-align:center; line-height:18px; border-top:1px solid #ebebeb; }
@media screen and (max-width:1020px) {
.protitle { width:auto; margin:50px auto 20px; }
.pro { width:auto; margin:0 10px; padding:20px; }
.pro ul li { width:100%; margin:0; margin-bottom:22px; box-sizing:border-box; }
.copyright { width:auto; margin:50px 10px 0; }
}
HTML代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>价格随规格切换示例 - 拓源网</title> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div>价格随规格切换示例 - 拓源网<p>Code in www.toyean.com</p></div> <div> <ul> <li> <p>规格：</p> <div> <a href="" data-price="99">PHP</a> <a href="" data-price="100">ASP.NET</a> </div> <div> 应付金额：￥<span>0</span> </div> </li> <li> <p>规格：</p> <div> <a href="" data-price="109">ASP</a> <a href="" data-price="110">JSP</a> <a href="" data-price="59">HTML</a> </div> <div> 应付金额：￥<span>0</span> </div> </li> <li> <p>规格：</p> <div> <a href="" data-price="15">MySQL</a> <a href="" data-price="25">DB2</a> <a href="" data-price="85">Oracle</a> </div> <div> 应付金额：￥<span>0</span> </div> </li> </ul> </div> <div>COPYRIGHT © 2010-2017 <a href="http://www.domAIn.com/" target="_blank">TOYEAN.COM</a>. ALL RIGHTS RESERVED. 京ICP备11003065号</div> </body> </html>
