手机使用hashnav时点击#slider1锚点无法跳转

zenglininbin · 发表于 2015-7-30 17:09:01

手机使用hashnav时点击#slider1锚点无法跳转，有高手能解决一下吗？
http://www.swiper.com.cn/api/basic/2015/0308/211.html

zenglininbin · 发表于 2015-8-2 20:48:42

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<link rel="stylesheet" href="css/swiper.min.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style></head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-hash="slide1">Slide 1</div>
<div class="swiper-slide" data-hash="slide2">Slide 2</div>
<div class="swiper-slide" data-hash="slide3">Slide 3</div>
<div class="swiper-slide" data-hash="slide4">Slide 4</div>
<div class="swiper-slide" data-hash="slide5">Slide 5</div>
<div class="swiper-slide" data-hash="slide6">Slide 6</div>
<div class="swiper-slide" data-hash="slide7">Slide 7</div>
<div class="swiper-slide" data-hash="slide8">Slide 8</div>
<div class="swiper-slide" data-hash="slide9">Slide 9</div>
<div class="swiper-slide" data-hash="slide10">Slide 10</div>
</div>
</div>
<div class="bn">
<li><a onclick="mySwiper.swipeTo(2)" href="#">goto 3</a></li>
<li><a onclick="mySwiper.swipeTo(4)" href="#">goto 3</a></li>
<li><a href="#" data-slide="2">goto 3</a></li>
<li><a href="#" data-slide="3">goto 3</a></li>
<li><a href="#" data-slide="4">goto 3</a></li>
<li><a href="#" data-slide="5">goto 3</a></li>
<li><a href="#" data-slide="6">goto 3</a></li>
<li><a href="#" data-slide="7">goto 3</a></li>
<li><a href="#" data-slide="8">goto 3</a></li>
<li><a href="#" data-slide="9">goto 3</a></li>
</div>
<script src="js/swiper3.1.0.jquery.min.js"></script>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
grabCursor : true,
paginationClickable: true,
hashNav:true})
$('a[data-slide]').click(function(e){
e.preventDefault();
mySwiper.swipeTo( $(this).data('slide') );
});
</script>
</body>
</html>

复制代码

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