jQuery实现带幻灯的tab滑动切换风格菜单代码

本文实例讲述了jQuery实现带幻灯的tab滑动切换风格菜单代码。分享给大家供大家参考。具体如下：

这是一款很不错的TAB滑动切换效果，jQuery带幻灯的tab滑动切换风格菜单导航条，点击上方的文字，下边就向左或向右滑动切换，动画效果的TAB选项卡。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-flash-style-tab-cha-menu-codes/

具体代码如下：

body {
 padding:0;
 margin:0 20px;
 background:#d2e0e5;
 font:12px arial;
}
#scroller-header a {
 text-decoration:none; 
 color:#867863; 
 padding:0 2px;
}
#scroller-header a:hover {
 text-decoration:none; 
 color:#4b412f
}
a.selected {
 text-decoration:underline !important; 
 color:#4b412f !important;
}
#scroller-header {
 background:url(images/header.gif) no-repeat;
 width:277px;
 height:24px;
 padding:35px 0 0 15px;
 font-weight:700;
}
#scroller-body {
 background:url(images/body.gif) no-repeat bottom center;
 width:277px;
 padding-bottom:30px;
}
#mask {
 width:250px;
 overflow:hidden;
 margin:0 auto;
}
#panel {
}
#panel div {
float:left;
}
#panel ul {
list-style:none;
margin:0 5px;
padding:0;
}
#panel ul li {
padding:5px;
color:#557482;
border-bottom:1px dotted #ccc;
}
#panel ul li.last {
border-bottom:none !important;
}
#panel-1 {
}
#panel-2 {
}
#panel-3 {
}



jQuery Sidebar Sliding Tab Menu Tutorial

流行时尚
网络注释
历史记录
网络收藏




 
 

 
Simple JQuery Image Slide Show with Semi-Transparent Caption
 
A Really Simple jQuery Plugin Tutorial
 
Create a Simple CSS + Javascript Tooltip with jQuery
 
Simple jQuery Modal Window Tutorial
 
 
 
 

 
30 Javascript Menu Plugins and scripts
 
10+ jQuery photo gallery and slider plugins
 
 
 
 
 

 
CSS and Web Gallery List
 
Examples for Inpiration
 
 
 
 
 

 
考高分网
 
seo
 
wordpress
 
 
  

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