本文实例讲述了jQuery实现Tab菜单滚动切换的方法。分享给大家供大家参考。具体如下：

这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧.

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/html4/strict.dtd">

jQuery 让你的Tab菜单滚动的代码

body {

font-family:arial;

font-size:12px;

}

a {

color:#333;

text-decoration:none;

display:block;

}

a:hover {

color:#888;

text-decoration:none;

}

#moving_tab {

overflow:hidden;

width:300px;

position:relative

border:1px solid #ccc;

margin:0 auto;

}

#moving_tab .tabs {

position:relative;

height:30px;

padding-top:5px;

cursor:default;

}

#moving_tab .tabs .item {

position:relative;

z-index:10;

float:left;

display:block;

width:150px;

text-align:center;

font-size:14px;

font-weight:700;

}

#moving_tab .tabs .lava {

position:absolute;

top:0; left:0;

z-index:0;

width:150px;

height:30px;

background:#abe3eb;

}

#moving_tab .content {

position:relative;

overflow:hidden;

background:#abe3eb;

border-top:1px solid #d9fafa;

}

#moving_tab .panel {

position:relative;

width:600px;

}

#moving_tab .panel ul {

float:left;

width:300px;

padding:0;

margin:0;

list-style:none;

}

#moving_tab .panel ul li {

padding:5px 0 5px 10px;

border-bottom:1px dotted #fff;

}

$(document).ready(function () {

$('.lava').css({left:$('span.item:first').position()['left']});

$('.item').mouseover(function () {

$('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});

$('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});

});

});

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