本文實例講述了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});

});

});

Popular Posts

Recent Posts

• Panel 01 Item 01
• Panel 01 Item 02
• Panel 01 Item 03
• Panel 01 Item 04
• Panel 01 Item 05

• Panel 02 Item 01
• Panel 02 Item 02
• Panel 02 Item 03
• Panel 02 Item 04
• Panel 02 Item 05

希望本文所述對大家的jQuery程序設計有所幫助。

總結

以上是生活随笔為你收集整理的html上下滚动切换顶端tab,jQuery实现Tab菜单滚动切换的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。