jquery文本框選擇器_商品尺寸選擇和商品價格選擇添加到購物車



158 630 211



特效描述:文本框選擇器 商品尺寸選擇 商品價格選擇 添加購物車,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

加群請備注:從官網了解到

老夫子电子