jquery文本框选择器_商品尺寸选择和商品价格选择添加到购物车



154 613 205



特效描述:文本框选择器 商品尺寸选择 商品价格选择 添加购物车,jquery,css 实现商品规格选择并显示价格,带图文,纯文本选择

代码结构

1. 引入CSS

<link type="text/css" href="base.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="jquery.js"></script>

3. HTML代码

<div class="tab"><a href="index.html" class="cur">带图片选择</a>  <a href="index2.html">纯文本选择</a></div>
<div class="iteminfo_buying">
	<!--规格属性-->
	<div class="sys_item_spec">
		<dl class="clearfix iteminfo_parameter iteminfo_parameter_default lh32">
			<dt>市场价</dt>
			<dd><span class="iteminfo_mktprice">$<b class="sys_item_mktprice">13.00</b></span></dd>
		</dl>
		<dl class="clearfix iteminfo_parameter lh32">
			<dt>本网价</dt>
			<dd><span class="iteminfo_price">$ <b class="sys_item_price">6.80</b></span></dd>
		</dl>
		<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
			<dt>颜色</dt>
			<dd>
				<ul class="sys_spec_img">
					<li data-aid="3"><a href="javascript:;" title="白色"><img src="img/1.png" alt="白色" /></a><i></i></li>
					<li data-aid="4"><a href="javascript:;" title="粉色"><img src="img/2.png" alt="粉色" /></a><i></i></li>
					<li data-aid="8"><a href="javascript:;" title="蓝色"><img src="img/3.png" alt="蓝色" /></a><i></i></li>
					<li data-aid="9"><a href="javascript:;" title="绿色"><img src="img/4.png" alt="绿色" /></a><i></i></li>
					<li data-aid="10"><a href="javascript:;" title="黄色"><img src="img/5.png" alt="黄色" /></a><i></i></li>
					<li data-aid="12"><a href="javascript:;" title="灰色"><img src="img/6.png" alt="灰色" /></a><i></i></li>
				</ul>
			</dd>
		</dl>
		<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="2">
			<dt>尺码</dt>
			<dd>
				<ul class="sys_spec_text">
					<li data-aid="13"><a href="javascript:;" title="S">S</a><i></i></li>
					<li data-aid="14"><a href="javascript:;" title="M">M</a><i></i></li>
					<li data-aid="16"><a href="javascript:;" title="L">L</a><i></i></li>
					<li data-aid="17"><a href="javascript:;" title="XL">XL</a><i></i></li>
				</ul>
			</dd>
		</dl>
					</div>
	<!--规格属性-->
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 导航切换 菜单切换 文本框 text文本框 单选框 单选按钮 购物车

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到