jquery mobile手机端点击选项卡切换代码
jquery mobile手机端点击选项卡切换代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>H5+jquery点击切换</title> <link type="text/css" rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <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> <style> *{text-decoration: none;margin: 0;padding: 0;list-style: none;} #hear{width: 100%;height: 44px;line-height: 45px;border-bottom: 1px solid #cccccc;} #hear a{font-weight: normal;color: black;} #hear li{text-align: center;float: left;height: 45px;} #hear li:nth-of-type(1){width: 33%;float: left;} #hear li:nth-of-type(2){width: 33%;float: left;} #hear li:nth-of-type(3){width: 34%;float: right;} #contentop li{ width: 90%; display: none;text-align: center;margin: 0 auto;margin-top: 12px;} #contentop .action{ display: block;} #contentop .usl{width: 100%;height: 110px;background:wheat;border: 1px solid #cccccc;margin-bottom: 10px;text-shadow: none;} #contentop .alo{width: 100%;height: 110px;background: white;border: 1px solid #cccccc;margin-bottom: 10px;text-shadow: none;} #contentop span{font-size: 1.3em;color: #47B0D7;} #contentop .sty1{margin-top: 18px;} #contentop .sty2{margin-top: 13px;} #contentop .sty3{margin-top: 13px;} #contentop .sty4{text-align: right;font-size: 0.8em;margin-top: -20px;} #contentop .Buy{font-size: 0.8em;margin-top: 2px;} #contentop .Buy div:nth-of-type(1){text-align: left;padding-left: 15px;} #contentop .Buy div:nth-of-type(2){float: right;} #contentop .cllio {background:url(img/20010.png)repeat-x;width: 93%;height:8px;margin: 0 auto;margin-top: 5px;} </style> <script> $(function(){ $("#hear li").click(function(){ $(this).css({ borderBottom: "2px solid red", height:"43px" }).siblings().css({ borderBottom: "none", height:"45px" }); }); $("#hear li").click(function(){ $(this).addClass("action").siblings().removeClass("action"); var index = $(this).index(); $("#contentop li").eq(index).css("display","block").siblings().css("display","none"); }); }); </script> </head><body> <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 </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 </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 </p> </div> </li> </ul> </div> </div> </div></body></html>
暂无评论
发表评论