Swiper中文论坛

标题: 手机使用hashnav时点击#slider1锚点无法跳转 [打印本页]
作者: zenglininbin    时间: 2015-7-30 17:09
标题: 手机使用hashnav时点击#slider1锚点无法跳转
手机使用hashnav时点击#slider1锚点无法跳转，有高手能解决一下吗？
http://www.swiper.com.cn/api/basic/2015/0308/211.html

作者: zenglininbin    时间: 2015-8-2 20:48
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Swiper demo</title>
  6.     <!-- Link Swiper's CSS -->
  7.     <link rel="stylesheet" href="css/swiper.min.css">
  8. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  9.     <!-- Demo styles -->
  10.     <style>
  11.     html, body {
  12.         position: relative;
  13.         height: 100%;
  14.     }
  15.     body {
  16.         background: #eee;
  17.         font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  18.         font-size: 14px;
  19.         color:#000;
  20.         margin: 0;
  21.         padding: 0;
  22.     }
  23.     .swiper-container {
  24.         width: 100%;
  25.         height: 100%;
  26.     }
  27.     .swiper-slide {
  28.         text-align: center;
  29.         font-size: 18px;
  30.         background: #fff;

  32.         /* Center slide text vertically */
  33.         display: -webkit-box;
  34.         display: -ms-flexbox;
  35.         display: -webkit-flex;
  36.         display: flex;
  37.         -webkit-box-pack: center;
  38.         -ms-flex-pack: center;
  39.         -webkit-justify-content: center;
  40.         justify-content: center;
  41.         -webkit-box-align: center;
  42.         -ms-flex-align: center;
  43.         -webkit-align-items: center;
  44.         align-items: center;
  45.     }
  46.     </style></head>
  47. <body>
  48.     <!-- Swiper -->
  49.     <div class="swiper-container">
  50.         <div class="swiper-wrapper">
  51.             <div class="swiper-slide" data-hash="slide1">Slide 1</div>
  52.             <div class="swiper-slide" data-hash="slide2">Slide 2</div>
  53.             <div class="swiper-slide" data-hash="slide3">Slide 3</div>
  54.             <div class="swiper-slide" data-hash="slide4">Slide 4</div>
  55.             <div class="swiper-slide" data-hash="slide5">Slide 5</div>
  56.             <div class="swiper-slide" data-hash="slide6">Slide 6</div>
  57.             <div class="swiper-slide" data-hash="slide7">Slide 7</div>
  58.             <div class="swiper-slide" data-hash="slide8">Slide 8</div>
  59.             <div class="swiper-slide" data-hash="slide9">Slide 9</div>
  60.             <div class="swiper-slide" data-hash="slide10">Slide 10</div>
  61.         </div>
  62.     </div>
  63.     <div class="bn">
  64.      <li><a onclick="mySwiper.swipeTo(2)" href="#">goto 3</a></li>
  65.      <li><a onclick="mySwiper.swipeTo(4)" href="#">goto 3</a></li>
  66.      <li><a href="#" data-slide="2">goto 3</a></li>
  67.      <li><a href="#" data-slide="3">goto 3</a></li>
  68.      <li><a href="#" data-slide="4">goto 3</a></li>
  69.      <li><a href="#" data-slide="5">goto 3</a></li>
  70.      <li><a href="#" data-slide="6">goto 3</a></li>
  71.      <li><a href="#" data-slide="7">goto 3</a></li>
  72.      <li><a href="#" data-slide="8">goto 3</a></li>
  73.      <li><a href="#" data-slide="9">goto 3</a></li>
  74.     </div>

  76.     <!-- Swiper JS -->
  77. <script src="js/swiper3.1.0.jquery.min.js"></script>

  79.     <!-- Initialize Swiper -->
  80. <script language="javascript">
  81. var mySwiper = new Swiper('.swiper-container',{
  82.           grabCursor : true,
  83.                   paginationClickable: true,
  84.                   hashNav:true})

  86.     $('a[data-slide]').click(function(e){
  87.     e.preventDefault();
  88.     mySwiper.swipeTo( $(this).data('slide') );
  89. });

  91. </script>
  92. </body>
  93. </html>
复制代码


这样写好象也不行，有人可以解决一下不




欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2