下载地址http://download.csdn.net/detail/cometwo/9393614
（用这个） 下载地址：http://download.csdn.net/detail/cometwo/9467997
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab标签选项卡切换jQuery特效</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 12px;
color: #666;
text-align: left;
}
h1 {
text-align: center;
border: 1px solid red;
}
h1 a{
text-decoration: none;
}
.tabbox {
width: 500px;
height: 140px;
margin: 100px auto;
background: #f0f0f0;
font-family: '微软雅黑';
border: 1px solid red;
}
.tabbox .tab {
overflow: hidden;
background: yellow;
}
.tabbox .tab a {
display: block;
padding: 10px 20px;
float: left;
text-decoration: none;
color: blue;
}
.tabbox .tab a:hover {
background: red;
color: green;
text-decoration: none;
}
.tabbox .tab a.on {
background: red;
color: green;
text-decoration: none;
}
.tabbox .content {
overflow: hidden;
width: 500px;
height: 100px;
position: relative;
}
.tabbox .content ul {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 100px;
}
.tabbox .content li {
width: 500px;
height: 100px;
float: left;
}
.tabbox .content li p {
padding: 30px;
}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div class="tabbox">
<div class="tab">
<a href="javascript:;" class="on">tab1</a>
<a href="javascript:;">tab2</a>
<a href="javascript:;">tab3</a>
<a href="javascript:;">tab4</a>
</div>
<div class="content">
<ul>
<li>
<p>tab1内容1</p>
</li>
<li>
<p>tab1内容2</p>
</li>
<li>
<p>tab1内容3</p>
</li>
<li>
<p>tab1内容4</p>
</li>
</ul>
</div>
</div>
<h1><a href="index.html">效果一</a> <a href="index2.html">效果二</a></h1>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function() {
$('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px');
$(".tabbox .tab a").mouseover(function() {
$(this).addClass('on').siblings().removeClass('on');
var index = $(this).index(); //检索当前元素的位置是第几个
number = index; //定义全局变量
var distance = -500 * index;
$('.tabbox .content ul').stop().animate({
left: distance
});
});
var auto = 1; //等于1则自动切换，其他任意数字则不自动切换，轮播图的原理就是这样做的
if (auto == 1) {
var number = 0;
var maxNumber = $('.tabbox .tab a').length;
function autotab() {
number++;
number == maxNumber ? number = 0 : number;
$('.tabbox .tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on');
var distance = -500 * number;
$('.tabbox .content ul').stop().animate({
left: distance
});
}
var tabChange = setInterval(autotab, 3000);
//鼠标悬停暂停切换
$('.tabbox').mouseover(function() {
clearInterval(tabChange);
});
$('.tabbox').mouseout(function() {
tabChange = setInterval(autotab, 3000);
});
}
});
</script>
<!-- 代码部分end -->
</body>
</html>拓展：增加滑动选项卡下过http://blog.csdn.net/libin_1/article/details/50379286
源码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>实例：jQuery弹性滑动导航菜单</title>
<style type="text/css">
body {
font-size: 100%;
font-family: "Microsoft YaHei", "Arial";
background: #fff;
}
#nav {
position: relative;
width: 832px;
border: 1px solid green;
margin: 100px auto 0 auto;
border-bottom: 3px solid #00FFFF;
}
#nav .nav-menu {
height: 50px;
}
#nav .nav-menu a {
display: block;
float: left;
height: 50px;
padding: 0 40px;
line-height: 50px;
color: black;
font-size: 16px;
text-decoration: none;
}
#nav .nav-current {
position: absolute;
bottom: -3px;
height: 3px;
overflow: hidden;
background: red;
}
</style>
<script id="jquery_172" type="text/javascript" class="library" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function() {
(function() {
// var $navcur = $(".nav-current");
// var $nav = $("#nav");
// var current = ".current";
var itemW = $("#nav").find(".current").innerWidth(); //默认当前位置宽度
var defLeftW = $("#nav").find(".current").position().left; //默认当前位置Left值
alert(itemW + '' + defLeftW);
//添加默认下划线
$(".nav-current").css({
width: itemW,
left: defLeftW
});
//hover事件
$("#nav").find("a").hover(function() {
var index = $(this).index(); //获取滑过元素索引值
var leftW = $(this).position().left; //获取滑过元素Left值
var currentW = $("#nav").find("a").eq(index).innerWidth(); //获取滑过元素Width值
$(".nav-current").stop().animate({
left: leftW,
width: currentW
}, 300);
}, function() {
$(".nav-current").stop().animate({
// left: defLeftW,
// width: itemW
left: leftW,
width: currentW //鼠标离开不动
}, 300)
})
})();
});
</script>
</head>
<body>
<div id="nav">
<div class="nav-menu">
<a href="#" class="current">首页</a>
<a href="#">了解我们</a>
<a href="#">产品展示</a>
<a href="#">服务报价</a>
<a href="#">最新消息</a>
<a href="#">联系方式</a>
</div>
<div class="nav-current"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>鼠标滑过Tab选项卡切换特效</title>
<style type="text/css">
/*reset*/
html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
textarea,
select,
button,
fieldset,
legend,
img,
ul,
ol,
li,
dl,
dt,
dd,
th,
td,
pre,
blockquote {
margin: 0;
padding: 0
}
html {
height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased
}
body {
background-color: #eee;
color: #666;
min-height: 100%;
height: auto!important;
height: 100%
}
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6 {
font: 12px/1 "宋体", "Microsoft Yahei", arial, simhei
}
table {
border-collapse: collapse;
border-spacing: 0
}
img,
fieldset {
border: 0;
vertical-align: middle
}
a {
text-decoration: none
}
a:visited {}
a:hover {
text-decoration: underline
}
a:active {}
ul,
li,
ol {
list-style: none
}
strong,
b {
font-weight: normal
}
em,
i {
font-style: normal
}
iframe {
display: block
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px 18px;
padding: 0.35em 0.625em 0.75em
}
legend {
border: 0;
padding: 0;
white-space: normal;
*margin-left: -7px
}
sup {
vertical-align: text-top
}
sub {
vertical-align: text-bottom
}
s {
text-decoration: none;
}
/*public*/
.fl {
display: inline;
float: left
}
.fr {
display: inline;
float: right
}
.cf:after {
content: "";
clear: both;
display: block;
height: 0;
overflow: hidden
}
.cf {
zoom: 1
}
.pb10 {
padding-bottom: 10px
}
.mt10 {
margin-top: 10px
}
/*main*/
.case {
width: 960px;
margin: 100px auto;
background: #fff;
padding: 15px;
box-shadow: 0 0 10px #ccc;
}
.case .title {
height: 20px;
border-bottom: 3px solid #e7e7e7;
padding-bottom: 10px;
}
.case .title h2 {
font-size: 20px;
font-family: "microsoft yahei";
}
.case .title-list {
position: relative;
top: 6px;
border: 1px solid red;
}
.case .title-list li {
width: 146px;
line-height: 20px;
text-align: center;
float: left;
background: palegreen;
display: inline;
cursor: pointer;
}
.case .title-list li.on {
color: red;
font-weight: bold;
}
.case .title-list p {
position: absolute;
top: 24px;
left: 0px;
width: 146px;
height: 7px;
border-top: 3px solid #ff6600;
overflow: hidden;
text-align: center;
}
.case .title-list b {
display: inline-block;
width: 0;
height: 0;
margin-top: -3px;
border-style: solid dashed dashed dashed;
/*画倒三角*/
border-width: 9px;
border-color: #ff6600 #fff #fff #fff;
/*画倒三角*/
overflow: hidden;
zoom: 1;
font-size: 0;
}
.product {
height: 268px;
position: relative;
overflow: hidden;
display: none;
margin-top: 20px;
}
.product ul {
position: absolute;
left: 0px;
}
.product-wrap .show {
display: block;
}
.product-wrap .product li {
float: left;
display: inline;
margin-left: 13px;
background: #f3f3f3;
border: 2px solid #fafafa;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
.product-wrap .product li.ml0 {
margin-left: 0px;
}
.product-wrap .product li a.imgwrap {
display: block;
width: 226px;
height: 200px;
background: #fff;
text-align: center;
}
.product-wrap .product li p {
padding-left: 15px;
color: #666666;
line-height: 22px;
}
.product-wrap .product li p a {
color: #666666;
text-decoration: none;
}
.product-wrap .product li p a:hover {
color: #ff6600;
text-decoration: none;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
<div class="case">
<div class="title cf">
<h2 class="fl">设计案例</h2>
<ul class="title-list fr cf ">
<li class="on">LOGO</li>
<li>宣传单</li>
<li>画册</li>
<li>优惠券</li>
<li>会员卡</li>
<p><b></b></p>
</ul>
</div>
<div class="product-wrap">
<!--案例1-->
<div class="product show">
<ul class="cf">
<li class="ml0">
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/1.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank">站长素材网站logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/1.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/1.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/1.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
</ul>
</div>
<!--案例2-->
<div class="product">
<ul class="cf">
<li class="ml0">
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/2.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/2.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/2.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/2.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
</ul>
</div>
<!--案例3-->
<div class="product">
<ul class="cf">
<li class="ml0">
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/3.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/3.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/3.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/3.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
</ul>
</div>
<!--案例4-->
<div class="product">
<ul class="cf">
<li class="ml0">
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/4.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/4.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/4.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/4.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
</ul>
</div>
<!--案例5-->
<div class="product">
<ul class="cf">
<li class="ml0">
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/5.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/5.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/5.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
<li>
<a href="http://www.zzsck.org" target="_blank" class="imgwrap">
<img src="images/5.jpg">
</a>
<p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
<p class="pb10">行业类别：艺术摄影,文化体育</p>
</li>
</ul>
</div>
</div>
</div>
<div style="text-align:center;clear:both">
<p>更多资源请到<a href="http://www.zzsck.org/js">js特效</a>下载！</p>
</div>
<script type="text/javascript">
$(function() {
//设计案例切换
$('.title-list li').mouseenter(function() { //可以改为click
var liindex = $(this).index();
$(this).addClass('on').siblings().removeClass('on');
$('.product-wrap div.product').eq(liindex).fadeIn(550).siblings('div.product').hide();
var liWidth = $('.title-list li').width();
$('.case .title-list p').stop(false, true).animate({
'left': liindex * liWidth + 'px'
}, 300);
});
//设计案例hover效果
$('.product-wrap .product li').hover(function() {
$(this).css("border-color", "blue");
$(this).find('p > a').css('color', 'red');
$(this).find('p').css('color', 'red');
}, function() {
$(this).css("border-color", "#fafafa");
$(this).find('p > a').css('color', '#666666');
$(this).find('p').css('color', '#666666');
});
});
</script>
</body>
</html>根据以上的例子对第一个做可滑动选项卡（自动滑动关闭）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab标签选项卡切换jQuery特效</title>
<meta http-equiv="refresh" content="100">
<script src="js/jquery-2.1.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 12px;
color: #666;
text-align: left;
}
.tabbox {
width: 500px;
height: 140px;
margin: 10px auto;
background: #f0f0f0;
font-family: '微软雅黑';
border: 1px solid red;
}
.tabbox .tab {
position: relative;
overflow: hidden !important;
background: pink;
border-bottom: 1px solid blueviolet;
}
.tabbox .tab a {
position: relative;
display: block;
padding: 10px 20px;
float: left;
text-decoration: none;
color: blue;
border: 0px solid red;
}
.tabbox .tab a:hover {
background: red;
color: green;
text-decoration: none;
}
.tabbox .tab a.on {
background: red;
color: green;
text-decoration: none;
}
.tabbox .content {
overflow: hidden;
width: 500px;
height: 100px;
position: relative;
}
.tabbox .content ul {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 100px;
}
.tabbox .content li {
width: 500px;
height: 100px;
float: left;
}
.tabbox .content li p {
padding: 30px;
}
#btn {
position: absolute;
bottom: 0px;
height: 2px;
overflow: hidden;
background: black;
}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div class="tabbox">
<div class="tab">
<a href="javascript:;" class="on">tab1</a>
<a href="javascript:;">tab2</a>
<a href="javascript:;">tab3</a>
<a href="javascript:;">tab4</a>
<div id="btn"></div>
</div>
<div class="content">
<ul>
<li>
<p>tab1内容1</p>
</li>
<li>
<p>tab1内容2</p>
</li>
<li>
<p>tab1内容3</p>
</li>
<li>
<p>tab1内容4</p>
</li>
</ul>
</div>
</div>
<script>
$(function() {
var itemW = $(".tab").find(".on").innerWidth();
$('#btn').css('width', itemW);
$(".tab").find("a").hover(function() {
var index = $(this).index(); //获取滑过元素索引值
var leftW = $(this).position().left; //获取滑过元素Left值
var currentW = $(".tab").find("a").eq(index).innerWidth(); //获取滑过元素Width值
$('#btn').stop(true, true).animate({
left: leftW,
width: currentW
}, 300);
}, function() {
$('#btn').stop(true, true).animate({
// left: defLeftW,
// width: itemW
left: leftW,
width: currentW //鼠标离开不动
}, 300)
})
$('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px');
$(".tabbox .tab a").mouseover(function() {
$(this).addClass('on').siblings().removeClass('on');
var index = $(this).index(); //检索当前元素的位置是第几个
number = index; //定义全局变量
var distance = -500 * index;
$('.tabbox .content ul').stop().animate({
left: distance
});
});
var auto = 0; //等于1则自动切换，其他任意数字则不自动切换
if (auto == 1) {
var number = 0;
var maxNumber = $('.tabbox .tab a').length;
function autotab() {
number++;
number == maxNumber ? number = 0 : number;
$('.tabbox .tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on');
var distance = -500 * number;
$('.tabbox .content ul').stop().animate({
left: distance
});
}
var tabChange = setInterval(autotab, 300);
//鼠标悬停暂停切换
$('.tabbox').mouseover(function() {
clearInterval(tabChange);
});
$('.tabbox').mouseout(function() {
tabChange = setInterval(autotab, 3000);
});
}
});
</script>
<!-- 代码部分end -->
</body>
</html>根据以上的例子对第一个做可滑动选项卡（自动滑动关闭）
这个在做的时候添加样式后看到 li 元素浮动无效
.tabbox .content {
/*overflow: hidden;*/
width: 500px;
height: 100px;
position: relative;
}
.tabbox .content ul {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 200px;
}
.tabbox .content li {
width: 500px;
height: 200px;
float: left;
border: 1px solid chartreuse;
/*可以看到浮动无效*/
}
不过不用怕，添加了JS就好了
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>实例：jQuery弹性滑动导航菜单</title>
<script src="js/jquery-2.1.0.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 100%;
font-family: "Microsoft YaHei", "Arial";
background: #fff;
text-align: left;
}
.tabbox {
width: 500px;
height: 250px;
margin: 10px auto;
background: #f0f0f0;
font-family: '微软雅黑';
border: 1px solid red;
}
#nav {
position: relative;
width:500px;
border: 1px solid green;
/*border-bottom: 3px solid #00FFFF;*/
}
#nav .nav-menu {
height: 50px;
}
#nav .nav-menu a {
display: block;
float: left;
height: 50px;
padding: 0 10px;
line-height: 50px;
color: black;
font-size: 16px;
text-decoration: none;
}
#nav .nav-current {
position: absolute;
bottom: -3px;
height: 3px;
overflow: hidden;
background: black;
}
.tabbox .content {
/*overflow: hidden;*/
width: 500px;
height: 100px;
position: relative;
}
.tabbox .content ul {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 200px;
}
.tabbox .content li {
width: 500px;
height: 200px;
float: left;
border: 1px solid chartreuse;
}
.tabbox .content li p {
padding: 30px;
}
</style>
</head>
<body>
<div class="tabbox">
<div id="nav">
<div class="nav-menu">
<a href="#" class="current">首页</a>
<a href="#">了解我们</a>
<a href="#">产品展示</a>
<a href="#">服务报价</a>
<a href="#">最新消息</a>
<a href="#">联系方式</a>
</div>
<div class="nav-current"></div>
</div>
<div class="content">
<ul>
<li>
<p>tab1内容1</p>
</li>
<li>
<p>tab1内容2</p>
</li>
<li>
<p>tab1内容3</p>
</li>
<li>
<p>tab1内容4</p>
</li>
<li>
<p>tab1内容5</p>
</li>
<li>
<p>tab1内容6</p>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
(function() {
// var $navcur = $(".nav-current");
// var $nav = $("#nav");
// var current = ".current";
var itemW = $("#nav").find(".current").innerWidth(); //默认当前位置宽度
var defLeftW = $("#nav").find(".current").position().left; //默认当前位置Left值
// alert(itemW + '' + defLeftW);
//添加默认下划线
$(".nav-current").css({
width: itemW,
left: defLeftW
});
//hover事件
$("#nav").find("a").hover(function() {
var index = $(this).index(); //获取滑过元素索引值
var leftW = $(this).position().left; //获取滑过元素Left值
var currentW = $("#nav").find("a").eq(index).innerWidth(); //获取滑过元素Width值
$(".nav-current").stop().animate({
left: leftW,
width: currentW
}, 300);
}, function() {
$(".nav-current").stop().animate({
// left: defLeftW,
// width: itemW
left: leftW,
width: currentW //鼠标离开不动
}, 300)
});
$('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px');
$(".tabbox #nav a").mouseover(function() {
$(this).addClass('on').siblings().removeClass('on');
var index = $(this).index(); //检索当前元素的位置是第几个
number = index; //定义全局变量
var distance = -500 * index;
$('.tabbox .content ul').stop().animate({
left: distance
});
});
})();
});
</script>
</html>
