<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab滑动特效</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,blockquote:after,
q:before, q:after {
content: ‘‘;
content: none;
}
a{ text-decoration:none;}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
#container{ width:500px; margin:10px auto;}
.tab-menu{ width:500px;}
.tab-menu ul{ list-style:none;}
.tab-menu li{ float:left; width:100px; height:30px; border:1px solid #3174b1; text-align:center; background:#5090c0; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom:1px solid #5090c0;}
.tab-menu li.selected{ float:left; width:100px; height:30px; border:1px solid #c8cdd0; text-align:center; background:#e6eaed; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom:1px solid #e6eaed;}
.tab-menu li.selected a{ color:#5090c0; line-height:30px;}
.tab-menu li a{ color:#fff; line-height:30px;}
.tab-content{ width:499px; overflow:hidden; border:1px solid #c8cdd0;}
.tab-content .tab-all{ width:2000px; }
.tab-all div{ float:left; width:498px; height:300px;}
.white-div{ position:relative; top:-302px; left:1px; background:#fff; height:2px; width:406px;}
</style>
</head>
<body>
<div id="container">
<div class="tab-menu">
<ul class="clearfix">
<li class="selected"><a href="javascript:void(0);">tabs1</a></li>
<li><a href="javascript:void(0);">tabs2</a></li>
<li><a href="javascript:void(0);">tabs3</a></li>
<li><a href="javascript:void(0);">tabs4</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-all clearfix">
<div>tabs1</div>
<div>tabs2</div>
<div>tabs3</div>
<div>tabs4</div>
</div>
</div>
<div class="white-div"></div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.2.min.js" language="javascript" type="text/javascript"></script>
<script>
$(function(){
var $tabmenu=$(".tab-menu li");
var $tabcon=$(".tab-all");
$tabmenu.on("click","a",function(){
var _index=$(this).parent().index();
$(this).parent().addClass("selected").siblings().removeClass("selected");
var twidth=$tabcon.find("div").eq(_index).width();
$tabcon.animate({‘margin-left‘:-twidth*_index + ‘px‘});
});
});
</script>
</body>
</html>
时间： 2024-11-10 01:10:30