js tab滑动切换

JavaScript011

js tab滑动切换,第1张

楼主的这个代码我看不太懂

是经过压缩的

楼主看下这个代码,经过修改应该可以的

http://www.lanrentuku.com/js/biaoqian-598.html

本文实例讲述了jQuery简单tab切换效果实现方法。分享给大家供大家参考。具体如下:

<script

src="js/jquery-latest.js"></script>

<SCRIPT

language=javascript

type=text/javascript>

$(document).ready(function

()

{

$('.tabtitle

li').click(function

()

{

var

index

=

$(this).index()

$(this).attr('class',"tabhover").siblings('li').attr('class','taba')

$('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide()

})

var

t

=

0

var

timer

=

setInterval(function(){

if(

t

==

$('.tabtitle

li').length

)

t

=

0

$('.tabtitle

li:eq('+t+')').click()

t++

},

700)

})

</SCRIPT>

<div

class="maintab">

<ul

class="tabtitle">

<li

class="tabhover"><a

href="#">选择标题1</a></li>

<li

class="taba"><a

href="#">选择标题2</a></li>

<li

class="taba"><a

href="#">选择标题3</a></li>

<li

class="taba"><a

href="#">选择标题4</a></li>

<li

class="taba"><a

href="#">选择标题5</a></li>

</ul>

<div

class="tabcontent">

选择内容1

</div>

<div

class="tabcontent"

style="DISPLAY:

none">

选择内容2

</div>

<div

class="tabcontent"

style="DISPLAY:

none">

选择内容3

</div>

<div

class="tabcontent"

style="DISPLAY:

none">

选择内容4

</div>

<div

class="tabcontent"

style="DISPLAY:

none">

选择内容5

</div>

</div>

希望本文所述对大家的jQuery程序设计有所帮助。

设置每个Tab 的点击事件

$(".select-type").click(function(){

$("div[data-select-type]").css("visibility","hidden")//先把所有的Tab隐藏

$(this).css("visibility","visible")//显示当前的tab

})