<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的优惠券</title> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <script type="text/javascript" src="../js/base.js"></script> <link rel="stylesheet" type="text/css" href="../assets/css/weui.min.css" /> <link rel="stylesheet" type="text/css" href="../assets/css/swiper-3.4.2.min.css" /> <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_773803_k1lcewwscuf.css" /> <script type="text/javascript" src="../assets/font/iconfont.js"> </script> <link rel="stylesheet" href="../css/outdate.css" /> <style type="text/css"> .swiper-container { height: 3.6rem; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { left: 44%; } #wai2{ display: none; } #wai3{ display: none; } </style> </head> <body> <div class="out"> <div class="use"> <span id="nouse" class="active">待使用</span> <span id="outdata">已过期</span> <span id="used">已使用</span> </div> <!--待使用优惠券--> </div > <div class="wai1" id="wai1"> <div class="wai"> <div class="youhui"> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <div class="money">¥5</div> <div class="date"> <span >代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> <div> <div> <div class="youhui"> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <div class="money">¥5</div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> <div> </div> </div> </div> <!--已过期代金券--> <div id="wai2"> <div class="wai" > <div class="youhui"> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <span class="outdate"><img src="../images/outdate.png" alt="" /></span> <div class="money">¥5</div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> <div> <div class="youhui"> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <span class="outdate"><img src="../images/outdate.png" alt="" /></span> <div class="money">¥5</div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> </div> <!--已使用代金券--> <div id="wai3"> <div class="wai" > <div class="youhui"> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <span class="outdate"><img src="../images/use.png" alt="" /></span> <div class="money">¥5</div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> <div > <div class="youhui"> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <span class="outdate"><img src="../images/use.png" alt="" /></span> <div class="money">¥5</div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> </div> </body> <script type="text/javascript" src="../assets/js/jquery-2.1.0.js"></script> <script type="text/javascript" src="assets/js/swiper-3.4.2.min.js"></script> <script type="text/javascript" src="assets/js/weui.js"></script> <script type="text/javascript" src="index.js"></script> <script> var wai1 = $('#wai1'); var wai2 = $('#wai2'); var wai3 = $('#wai3'); var nouse = $('#nouse'); var outdata = $('#outdata'); var used = $('#used'); $('#nouse').click(function() { wai1.css('display', 'block'); wai2.css('display', 'none'); wai3.css('display', 'none'); nouse.css('color', '#FE0A01'); outdata.css('color', '#252729'); used.css('color', '#252729'); }) $('#outdata').click(function() { wai1.css('display', 'none'); wai2.css('display', 'block'); wai3.css('display', 'none'); nouse.css('color','#252729' ); outdata.css('color', '#FE0A01'); used.css('color', '#252729'); }) $('#used').click(function() { wai1.css('display', 'none'); wai2.css('display', 'none'); wai3.css('display', 'block'); nouse.css('color', '#252729'); outdata.css('color', '#252729'); used.css('color', '#FE0A01'); }) </script> </html>