jQuery仿外卖订餐购物车代码



57 225 76



特效描述:jQuery 仿外卖订餐 购物车代码,jQuery仿外卖订餐购物车代码

代码结构

1. 引入JS

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

2. HTML代码

<div class="main">
	<div class="left-menu">
		<ul>  
           <li class="active">营养套餐<span class="num-price"></span></li>  
           <li>酒水饮料</li>  
           <li>酒水饮料</li>  
           <li>酒水饮料</li> 
		   <li>酒水饮料</li>  
           <li>酒水饮料</li>  
           <li>酒水饮料</li> 
		   <li>酒水饮料</li>  
           <li>酒水饮料</li>  
           <li>酒水饮料</li> 
		   <li>酒水饮料</li>  
           <li>酒水饮料</li>  
           <li>酒水饮料</li>  
        </ul> 
	</div>
	<div class="con">
		<div class="right-con con-active">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="footer">  
		<div class="left">已选:
		<span id="cartN">
			<span id="totalcountshow">0</span>份 总计:¥<span id="totalpriceshow">0</span></span>元  
		</div>  
		<div class="right">  
			<a id="btnselect" class="xhlbtn  disable" href="javascript:void(0)">去结算</a>  
		</div>   
	</div>
</div>
<script type="text/javascript">
$(function () {  
	//加的效果  
	$(".add").click(function () {  
		$(this).prevAll().css("display", "inline-block");  
		var n = $(this).prev().text();  
		var num = parseInt(n) + 1;  
		if (num == 0) { return; }  
		$(this).prev().text(num);  
		var danjia = $(this).next().text();//获取单价  
		var a = $("#totalpriceshow").html();//获取当前所选总价  
		$("#totalpriceshow").html((a * 1 + danjia * 1).toFixed(2));//计算当前所选总价  
		var nm = $("#totalcountshow").html();//获取数量  
		$("#totalcountshow").html(nm*1+1);  
		jss();//<span style='font-family: Arial, Helvetica, sans-serif;'></span>   改变按钮样式
	});  
	//减的效果  
	$(".minus").click(function () {  
		var n = $(this).next().text();  
		var num = parseInt(n) - 1;  
		$(this).next().text(num);//减1  
		var danjia = $(this).nextAll(".price").text();//获取单价  
		var a = $("#totalpriceshow").html();//获取当前所选总价  
		$("#totalpriceshow").html((a * 1 - danjia * 1).toFixed(2));//计算当前所选总价  
		var nm = $("#totalcountshow").html();//获取数量  
		$("#totalcountshow").html(nm * 1 - 1);  
		//如果数量小于或等于0则隐藏减号和数量  
		if (num <= 0) {  
			$(this).next().css("display", "none");  
			$(this).css("display", "none");  
			jss();//改变按钮样式  
			 return  
		}  
	});  
	function jss() {  
		var m = $("#totalcountshow").html();  
		if (m > 0) {  
			$(".right").find("a").removeClass("disable");  
		} else {  
		   $(".right").find("a").addClass("disable");  
		}  
	};
	//选项卡
	$(".con>div").hide();
	$(".con>div:eq(0)").show();	
	$(".left-menu li").click(function(){
		$(this).addClass("active").siblings().removeClass("active");
		var n = $(".left-menu li").index(this);
		$(".left-menu li").index(this);
		$(".con>div").hide();
		$(".con>div:eq("+n+")").show();	
	});
});  
</script>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 选项卡自动切换 购物车

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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