<!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" /> <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_1qg03k1415.css" /> <script type="text/javascript" src="../assets/font/iconfont.js"></script> <script type="text/javascript" src="../js/base.js"></script> <link rel="stylesheet" href="../css/middle_line.css" /> <style type="text/css"> .swiper-container { height: 3.6rem; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { left: 44%; } .lis .iconfont { color: #999999; font-size: 0.5rem; } . .active { color: } a:visited {color: #c8c8cd} </style> </head> <body> <div class="header_out"> <header> <span class="left"> <i class="iconfont icon-dizhi"></i> <span class="area" >天津</span> </span> <span class="shu"> <i class="iconfont icon-sousuo fang"></i> <input type="text" class="in" placeholder="搜索活动名称" /> </span> <span class="sousuo">搜索</span> </header> </div> <div class="list"> <ul> <li > <a href="peripheralShort-term.html"> <div class="li_imgbox "><img src="../images/zhou.png" alt="" /></div> <div class="zhou zhou_txt">周边短线</div> </a> </li> <li > <a href="middle_line.html"> <div class='imgbox_active li_imgbox'><img src="../images/guo.png" alt="" /></div> <div class="zhou zhou_txt">国内中线</div> </a> </li> <li> <a href="longline.html"> <div class="li_imgbox"><img src="../images/chang.png" alt="" /></div> <div class="zhou zhou_txt">国内长线</div> </a> </li> <li> <a href="area_line.html"> <div class="li_imgbox"><img src="../images/hai.png" alt="" /></div> <div class="zhou zhou_txt">海外线路</div> </a> </li> <li> <a href="popular.html"> <div class="li_imgbox"><img src="../images/people.png" alt="" /></div> <div class="zhou zhou_txt">人气最多</div> </a> </li> <li> <a href="start.html"> <div class="li_imgbox"><img src="../images/fa.png" alt="" /></div> <div class="zhou zhou_txt">即将出发</div> </a> </li> <li> <a href="teamorder.html"> <div class="li_imgbox"><img src="../images/tuan.png" alt="" /></div> <div class="zhou zhou_txt">团队定制</div> </a> </li> <li> <a href="outdoorChannel.html"> <div class="li_imgbox"><img src="../images/hu.png" alt="" /></div> <div class="zhou zhou_txt">户外频道</div> </a> </li> </ul> </div> <div></div> <div class="zhou1"> 国内中线 </div> <div class="short_line"> <div class="picture"> <img src="../images/banner.png" alt="" /> </div> <div class="qing"> <div class="qing_out"> <span class="run"> 轻装穿越千八11峰4日行 轻装穿越千八11峰4日行轻装穿越千八11峰4日行轻装穿越千八11峰4日行 轻装穿越千八11峰4日行轻装穿越千八11峰4日行 轻装穿越千八11峰4日行轻装穿越千八11峰4日行 越千八11峰4日行轻装穿越千八11峰4日行轻装穿越千八11峰4日行轻装穿越千八11峰4日行 </span> <div class="year"> <div class="act act2"> <i class="iconfont icon-calendar"></i> <span class="txt"> 2018.08.13 </span> </div> <div class="act act1"> <i class="iconfont icon-wuxing"></i> <span class="txt"> 收藏 </span> </div> </div> </div> <div class="mon"> <span class="jia"> ¥1100 </span> <span class="shou"> 售29 剩3 </span> </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 mySwiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', autoplay: 1500, //可选选项,自动滑动 loop: true }) </script> </body> </html> <script> $('.list li div').click(function(){ $(this).css('background','#FFEEDA') }) $('.short_line').click(function(){ window.location.href='packageDetails.html'; }) $('.act2').click(function(event){ event.stopPropagation(); }); //五星收藏阻止冒泡 $('.act1').click(function(event){ event.stopPropagation(); if($(this).find('.iconfont').attr('class')=='iconfont icon-wuxing'){ $(this).find('.iconfont').attr("class", "iconfont icon-shoucang"); }else{ $(this).find('.iconfont').attr("class", "iconfont icon-wuxing"); } }); </script>