微信公众号

jquery价格随规格切换示例

web前端 8245 8年前 (2017-03-31)

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

效果预览：

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="https://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>

分享给朋友：