jquery价格随规格切换示例

web前端293203年前

现如今,我们浏览电商网站的产品页面时,常常会看到产品的规格和价格展示,不同的规格对应不同的价格,比如本站的热销主题页面,点击规格后显示对应的价格,实现的方法非常简单,于是写了一个响应式的示例页面,来展示价格随着规格进行切换。

效果预览:

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="https://www.toyean.com/" target="_blank">TOYEAN.COM</a>. ALL RIGHTS RESERVED. 京ICP备11003065号</div></body></html>