js的tab选项卡点击切换或隐藏用jQuery也行！快！

JavaScript010

js的tab选项卡点击切换或隐藏用jQuery也行！快！,第1张

//注意：变量id一定要为数字！

//需要引用jQuery包

$("#t1 a").click(function(){ //获取id为t1的div下面的所有a标签

var id = $(this).attr("id").substr(5)//截取当前点击的对象的id属性的第6位及之后的字符

$("#t1 a").attr("class","")//使所有的a标签的class样式都为空

$(this).attr("class","sel")//使被点击的a标签更换class样式为sel

$(".we").hide()//所有的class名为we的都隐藏

$("#w"+id).show()//让其中的一个class名为we并且id为w+id的div显示

})

　我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目，我们说的TAB一般由导航条和TAB对应的内容组成，切换导航条上的标签同时标签对应的内容也会跟着切换。

我们准备一个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>

在一个页面中有多个Tab的问题可以这样来处理：

参照

工程项目管理/单位工程项目完工管理/申请列表

比如在此页面中有三个Tab切换：

那么要拆成四个页面一个Mange+三个Tab的页面

1、Manage页面：在Tabs中的TabsContent里面要有三个<div></div>这一定要有不能删掉。

<div class="page">

<div class="pageContent">

<div class="tabs" currentindex="2" eventtype="click">

<div class="tabsHeader">

<div class="tabsHeaderContent">

<ul>

<li><a href="a.aspx" class="j-ajax"

><span>名称1</span></a></li>

<li><a href="b.aspx" class="j-ajax"

><span>名称2</span></a></li>

<li><a href="c.aspx" class="j-ajax"

><span>名称3</span></a></li>

</ul>

</div>

</div>

<div class="tabsContent" >

<div id="tab1"></div>

<div id="tab2"></div>

<div id="tab3"></div>

</div>

</div>

</div>

</div>

2、其他的三个页面的格式为：

<div class="panelBar">

<form id="pagerForm"

action="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx"

method="post">

<input type="hidden" name="status" value="active"/>

<input type="hidden" name="pageNum" />

<input type="hidden" name="numPerPage" value="<%=numPerPage.Value%>" />

</form>

<ul class="toolBar">

<li><a class="delete"

href="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx?fuid={sid_fin}"

target="navTabTodo"

title="确定要反审核吗?"><span>反审核</span></a></li> </ul>

</div>

<table class="table" layouth="138">

</table>

<div class="panelBar">

<div class="pages">

<span>显示</span>

<select id="numPerPage" runat="server"

onchange="tabPageBreak(gpage.jObj('tab2'),{numPerPage:this.value})">

<option value="3" selected="selected">3</option>

<option value="20">20</option>

<option value="30">30</option>

<option value="50">50</option>

</select>

<span>条，共<%=total %>条</span>

</div>

<div class="pagination" targettype="navTab" totalcount="<%=total

%>" numperpage="<%=numPerPage.Value %>" currentpage="<%=pageNum %>" tab="tab2">

</div>

</div>

3、在其他的三个页面中一开始就应该写<div class="panelBar"></div

class="panelBar">，前面的样式不需要，因为我们加载的时候前面的样式已经加载了所以只需要从panelBar开始加载即可。

比如上面显示处理分页的pagerForm也可以放到pagelBar里面。不能放到外面，不会加载的。

4、对于分页因为涉及到多个Tab的同时分页的问题，但是一个页面只有一个pagerForm考虑到假如修改为多个pagerForm的话，问题更加繁琐，

所以现在我们拆开来处理。里面的分页稍作了修改，以前我们用navTabPageBreak()；现在我们用tabPageBreak并将当前tab2加了前缀的的值传到脚本中。