1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="选项卡,tab" />
<!--设置可以被浏览器搜索到的关键字-->
<meta name="author" content="王" />
<!--作者-->
<meta name="description" content="" />
<!--对网站的描述-->
<script src="Scripts/jquery-1.7.1.min.js"></script>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.zzsc { /*整个选项卡的样式*/
width: 500px;
height: 300px;
margin: 0 auto;
background: #f0f0f0;
/*border: 1px solid black;*/
}
.zzsc .tab {
/*overflow: hidden;*/
background: #ccc;
height: 30px;
border-bottom: 1px solid #38b942;
width: 498px;
/*text-align: center;*/
}
.zzsc .tab a {
position: relative;
display: inline-block;
text-decoration: none;
color: #333;
margin-left: 10px;
top: 4px;
height: 100%;
}
.zzsc .tab a:hover {
background: #f0f0f0;
color: #ff6a00;
text-decoration: none;
border-bottom: 1px solid #f0f0f0;
}
.zzsc .tab a.on {
background: #f0f0f0;
color: black;
top: 4px;
text-decoration: none;
border-bottom: 1px solid #f0f0f0;
}
/*实现内容的样式*/
.zzsc .content {
overflow: hidden;
width: 498px;
height:200px;
position: relative;
overflow-y:auto;
/*border: 1px solid #f00;*/
}
.zzsc .content ul {
position: absolute;
left: 0;
top: 0;
/*height:300px;*/
}
.zzsc .content li {
width: 500px;
/*height: 300px;*/
float: left;
}
.zzsc .content li p {
padding: 10px;
}
</style>
<script>
$(function () {
$(‘.zzsc .content ul‘).width(500 * $(‘.zzsc .content li‘).length + ‘px‘);
$(".zzsc .tab a").click(function () {
$(this).addClass(‘on‘).siblings().removeClass(‘on‘);
var index = $(this).index();
number = index;
var distance = -500 * index;
$(‘.zzsc .content ul‘).stop().animate({
left: distance
});
});
var auto = 1; //等于1则自动切换，其他任意数字则不自动切换
if (auto == 1) {
var number = 0;
var maxNumber = $(‘.zzsc .tab a‘).length;
function autotab() {
number++;
number == maxNumber ? number = 0 : number;
$(‘.zzsc .tab a:eq(‘ + number + ‘)‘).addClass(‘on‘).siblings().removeClass(‘on‘);
var distance = -500 * number;
$(‘.zzsc .content ul‘).stop().animate({
left: distance
});
}
//设置自动播放
//var tabChange = setInterval(autotab, 3000);
}
//window.addEventListener("click", function () {
// document.getElementById("sh").style.display = "block";
//})
});
</script>
</head>
<body>
<div class="zzsc">
<div class="tab">
<a href="javascript:void(0);" class="on">第一个</a>
<a href="javascript:void(0);">第二个</a>
<a href="javascript:;">第三个</a>
<a href="javascript:;">第四个</a>
</div>
<div class="content">
<ul>
<li>阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
阿达的放大放大放大师傅<br />
</li>
<li>安装等发达
</li>
<li>是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
</li>
<li>根据客观环境和法国
</li>
</ul>
</div>
</div>
<br />
<input type="button" value="显示" id="btn" />
<div id="sh" style="position:fixed;top:0;left:0;background-color: rgba(128, 128, 128,0.5); width: 100%; height: 100%; display: none">
<div style="position:fixed;bottom:0;width:200px;height:200px;background-color:#ff6a00">1111</div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/lgjc/p/5868700.html