我们准备一个TAB导航#pagenavi，里面包含TAB导航要切换的四个导航按钮，然后是切换的主体内容#slider，这里应该放置四个li与导航按钮对应，内容自定义。
由于是移动端应用，我们加载zepto.js，zepto就是体积小的jquery。然后需要加载触屏滑动插件touchslider.js。
接下来我们就直接调用TouchSlider，通过设置绑定tab，滑动方向、速度、时间等信息实现内容切换，请看详细代码：
<script type="text/javascript">
var page='pagenavi'
var mslide='slider'
var mtitle='emtitle'
arrdiv = 'arrdiv'
var as=document.getElementById(page).getElementsByTagName('a')
var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){
var as=document.getElementById(this.page).getElementsByTagName('a')
as[this.p].className=''
as[index].className='active'
this.p=index
var txt=as[index].innerText
$("#"+this.page).parent().find('.emtitle').text(txt)
var txturl=as[index].getAttribute('href')
var turl=txturl.split('#')
$("#"+this.page).parent().find('.go_btn').attr('href',turl[1])
}})
tt.page = page
tt.p = 0
for(var i=0i<as.lengthi++){
(function(){
var j=i
as[j].tt = tt
as[j].onclick=function(){
this.tt.slide(j)
return false
}
})()
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8">
<title>垂直外边距合并</title>
<style>
h1{
display:inline-block
width:80px
}
.active{
border:1px solid green
}
.content{
display:none
}
.content.active{
display:block
}
</style>
</head>
<body>
<h1 class="active">TAB1</h1>
<h1>TAB2</h1>
<h1>TAB3</h1>
<div class="con">
<div class="content active">
这里是一的内容
</div>
<div class="content">
这里是二的内容
</div>
<div class="content">
这里是三的内容
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$('h1').click(function(){
var index = $(this).index()
$('.content').eq(index).show().addClass('active').siblings().removeClass('active').hide()
})
</script>
</body>
</html>
这位网友你好，其实tab页挺简单的，上面就是我简单写了一个。你可以自己复制运行一下，改一下jQuery的路径即可。讲一下原理，上面TAB1到3是切换按钮，下面是对应内容，它们的数量是相等的，当点击上面的按钮的时候获取一下它的index，也就是一个第几个按钮，它下面相应的内容就显示，其它的内容隐藏。页面刚加载的时候只有第一个内容是显示的，有一个控制显示的类active，在点击按钮的同时只要加上对应的样式的类即可，隐藏的时候去掉对应的样式。
