选项卡切换页面

qq_37068910 2016-12-22 02:44:14
做了一个选项卡切换页面,一共四个页面,然后不知道为什么页面的最底部会出现相当于一整张页面的空白高度,而且在刷新的时候,空白处还会时不时出现一样的页面,但是检查了,并没有重复的数据。(由于代码过多,这是我大体的页面布局代码)




<div class="tabs">
<a href="#" hidefocus="true" class="active">第一页面</a>
<a href="#" hidefocus="true">第二页面</a>
<a href="#" hidefocus="true">第三页面</a>
<a href="#" hidefocus="true">第四页面</a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="content-slide">
内容一
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
内容二
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
内容三
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
内容四
</div>
</div>
</div>
</div>


<script>
var tabsSwiper = new Swiper('.swiper-container',{
speed:500,
onSlideChangeStart: function(){
$(".tabs .active").removeClass('active');
$(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
}
});

$(".tabs a").on('touchstart mousedown',function(e){
e.preventDefault()
$(".tabs .active").removeClass('active');
$(this).addClass('active');
tabsSwiper.swipeTo($(this).index());
});

$(".tabs a").click(function(e){
e.preventDefault();
});
</script>
...全文
167 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
孟子E章 2016-12-22
  • 打赏
  • 举报
回复
firebug调试下看看空白部分是哪个div产生的, 一般是因为show() hide()的时候有问题

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧