jquery mobile手機端點擊選項卡切換代碼



99 395 132



特效描述:點擊切換 選項卡切換,jquery手機選項卡切換

代碼結構

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js" ></script>

3. HTML代碼

	<div data-role="page">
		<div data-role = "content-floud">			
			<div style="font-family: '微軟雅黑';">
				<ul id="hear">
					<li class="action" style="border-bottom: 2px solid red;height: 43px;"><a href="#">未使用<span style="color: red;">(0)</span></a></li>
					<li><a href="#" >已使用<span style="color: red;">(8)</span></a></li>
					<li><a href="#" >已過期<span style="color: red;">(2)</span></a></li>
				</ul>
				<ul id="contentop">
					<li class="action">
                        <div class="alo">
                        	<div class="ui-grid-a sty3" >
                        		<div class="ui-block-a">優惠券</div>
                        		<div class="ui-block-b">僅可購買部分商品</div>
                        	</div>
                        	<div class="ui-grid-a sty2" >
                        		<div class="ui-block-a "><span>¥50.00</span></div>
                        		<div class="ui-block-b"></div>
                        	</div>
                        	<div class="cllio"></div>
                        	<div class="ui-grid-a Buy" >
                        		<div class="ui-block-a">兌換碼:0001</div>
                        		<div class="ui-block-b">2016.02.01-2016.08.25</div>
                        	</div>
                        </div>
                        <div class="alo">
                        	<div class="ui-grid-a sty3" >
                        		<div class="ui-block-a">優惠券</div>
                        		<div class="ui-block-b">僅可購買部分商品</div>
                        	</div>
                        	<div class="ui-grid-a sty2" >
                        		<div class="ui-block-a "><span>¥30.00</span></div>
                        		<div class="ui-block-b">滿99元可用</div>
                        	</div>
                        	<div class="cllio"></div>
                        	<p class="sty5">2016.02.01-2016.08.25&nbsp;&nbsp;&nbsp;&nbsp;</p>
                        </div>
					</li>
					<li>
                       <div class="alo">
                        	<div class="ui-grid-a sty3" >
                        		<div class="ui-block-a">優惠券</div>
                        		<div class="ui-block-b">僅可購買部分商品</div>
                        	</div>
                        	<div class="ui-grid-a sty2" >
                        		<div class="ui-block-a "><span>¥50.00</span></div>
                        		<div class="ui-block-b"></div>
                        	</div>
                        	<div class="cllio"></div>
                        	<p class="sty5">2016.02.01-2016.08.25&nbsp;&nbsp;&nbsp;&nbsp;</p>
                        </div>
					</li>
					<li>
						<div class="usl">
                        	<div class="ui-grid-a sty3" >
                        		<div class="ui-block-a">優惠券</div>
                        		<div class="ui-block-b">僅可購買部分商品</div>
                        	</div>
                        	<div class="ui-grid-a sty2" >
                        		<div class="ui-block-a "><span>¥50.00</span></div>
                        		<div class="ui-block-b"></div>
                        	</div>
                        	<div class="cllio"><!--<img src="../images/2001.png"/>--></div>
                        	<p class="sty5">2016.02.01-2016.08.25&nbsp;&nbsp;&nbsp;&nbsp;</p>
                       </div>
					</li>
				</ul>
			</div>			
		</div>					
	</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子