<!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_3se1rq7vwl5.css" /> <script type="text/javascript" src="../assets/font/iconfont.js"> </script> <link rel="stylesheet" href="../css/packageDetails.css" /> <script language="JavaScript" src="../cjjs/mydate.js"></script> <style type="text/css"> .swiper-container { height: 3.6rem; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { left: 44%; } .niuniu { display: none; height: 4.4rem; } .mold_out { display: none; } </style> </head> <body> <!--轮播图--> <div class='pic'> <div class="swiper-container "> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="../images/banner.png" alt="" /> </div> <div class="swiper-slide"> <img src="../images/banner.png" alt="" /> </div> <div class="swiper-slide"> <img src="../images/banner.png" alt="" /> </div> </div> <div class="swiper-pagination"> <img src="../images/banner.png" alt="" /> </div> </div> </div> <!--===============最新活动==========--> <div class="piclist"> <div class="newxia"> <div class="left"> <div class="qing"> 轻装穿越八11峰4日行 </div> <div class="nianout"> <div class="nian"> <div class="pelpe pl"> <span>¥1190起/人</span> </div> <div class="count pelpe" id="change"> <i class='iconfont icon-calendar shian'></i> <span class="showcang">请选择出发批次</span> </div> </div> </div> </div> </div> </div> <!--灰色间隔--> <div class="hui"></div> <!--预定信息--> <div class="piclist1"> <div class="newxia1"> <sapn class="yu"> 预定信息 </span> </div> <div class="dis"> <span class="dingjin"> 定金: 600/总价1190 </span> <span class="yishou"> 已售,1剩余29 </span> </div> <div class="newxia2 " id="newxia2"> <span class="tao active1" id="tao"> 套餐详情 </span> <span class="can" id="can"> 套餐参数 </span> <span class="yu1" id="yu1"> 预定须知 </span> <span class="yong" id="yong"> 用户评价 </span> </a> </div> </div> <div class="xianshi_two"> <img src="../images/banner.png" alt="" /> </div> <!--选项卡--> <div class="niuniu"> <div class="xianshi1"> <div> <span class="tu"> <img src="../images/deng.png" alt="" /> </span> <span class="niu">妞妞</span> <div class="xing"> <i class="iconfont icon-wuxing"></i> <i class="iconfont icon-wuxing"></i> <i class="iconfont icon-wuxing"></i> <i class="iconfont icon-wuxing"></i> </div> </div> <span class="nianxian">2018.08.07</span> </div> <div> <span class="pan">这次攀岩超刺激,特别安全!</span> </div> </div> <!--====底部=====--> <a href="orders_submitted.html"> <footer class="foot ok"> 立即预定 </footer> </a> <div class='mold_out'> <div class='mold_center'> <div class="scroll_out"> <div class="scroll"> <div class="money"> <div class="year_change"> <img src="../images/circle1.png"/> <span>2018/07/03 至 2018/07/06</span> </div> <div class="price">¥1190</div> </div> <div class="money"> <div class="year_change"> <img src="../images/circle.png"/> <span>2018/07/03 至 2018/07/07</span> </div> <div class="price">¥1190</div> </div> <div class="money"> <div class="year_change"> <img src="../images/circle.png"/> <span>2018/07/03 至 2018/07/08</span> </div> <div class="price">¥1190</div> </div> <div class="money"> <div class="year_change"> <img src="../images/circle.png"/> <span>2018/07/03 至 2018/07/09</span> </div> <div class="price">¥1190</div> </div> </div> <button class="bottom_button" value="">确定</button> </div> </div> </div> <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 xianshi_two = $('.xianshi_two'); var yu1 = $('.yu1'); var can = $('.can'); var xianshi = $('.xianshi'); var niuniu = $('.niuniu'); var yong = $('.yong'); var tao = $('.tao'); var xianshi = $('.xianshi2'); tao.click(function() { xianshi_two.css('display', 'block'); $("#tao").attr("class", "tao active1"); $("#can").attr("class", "can"); $("#yu1").attr("class", "yu1"); $("#yong").attr("class", "yong"); niuniu.css('display', 'none'); }) can.click(function() { // xianshi.css('display', 'block'); xianshi_two.css('display', 'block'); niuniu.css('display', 'none'); // xianshi2.css('display', 'none'); $("#tao").attr("class", "tao"); $("#can").attr("class", "can active1"); $("#yu1").attr("class", "yu1"); $("#yong").attr("class", "yong"); // xianshi2.css('display', 'none'); }) yu1.click(function() { // xianshi.css('display', 'none'); xianshi_two.css('display', 'block'); niuniu.css('display', 'none'); $("#tao").attr("class", "tao"); $("#yu1").attr("class", "yu1 active1"); $("#can").attr("class", "can"); $("#yong").attr("class", "yong"); // xianshi2.css('display', 'none'); }) yong.click(function() { // xianshi.css('display', 'none'); niuniu.css('display', 'block'); $("#tao").attr("class", "tao"); $("#can").attr("class", "can"); $("#yong").attr("class", "yong active1"); $("#yu1").attr("class", "yu1"); // xianshi2.css('display', 'none'); xianshi_two.css('display', 'none'); }) </script> </body> </html> <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 mySwiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', autoplay: 1500, //可选选项,自动滑动 loop: true }) $('.money img').click(function(event) { $(this).attr("src", "../images/circle1.png"); $(this).parents('.money').siblings().find('img').attr("src", "../images/circle.png"); }); //点击确定弹框隐藏 $('.count').click(function() { if($('.mold_out').css('display') == 'block') { $('.mold_out').css('display', 'none'); } else { $('.mold_out').css('display', 'block'); } }) //点击页面弹框隐藏 $('body').click(function() { $('.mold_out').css('display', 'none'); }) $('#change').click(function(event) { event.stopPropagation(); }) var index = 0; var num = 0; $('.bottom_button').click(function() { var inputLength = $('.mold_center').find('i').length; for(var i = 0; i < inputLength; i++) { if($('.mold_center').find('i').eq(i).attr("class")=="iconfont icon-yuandianxiao") { num = num + 1; index = i; } } if(num == 0) { $('.mold_out').css('display', 'none'); } else { $('.showcang').html($('.mold_center').find('span').eq(index).html()); $('.mold_out').css('display', 'none'); } }) $('.mold_out').click(function() { event.stopPropagation(); }) change </script>