没用任何图片实现的tab
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body{
margin: 60px auto;
width: 600px;
text-align: left;
background: #ffe;
}
.header{
}
.header a{
float: left;
width: 80px;
padding:0 10px;
text-decoration: none;
color: white;
background: black;
color: #fff;
line-height: 30px;
margin-right: -20px;
opacity: 0.7;
/*这三行很牛逼...*/
height: 0px;
border-right: 30px solid white;
border-bottom: 30px solid orange;
}
.content{
border-top:3px solid gray;
margin-top: -6px;
background: white;
padding: 25px;
}
.content h2{
border-left: 5px solid #0cf;
padding: 15px;
}
.content p{
border-left: 5px solid #B1F3A5;
padding: 15px;
}
</style>
</head>
<body>
<div class="tabs">
<div class="header">
<a href="#">ONE</a>
<a href="#">TWO</a>
<a href="#">THREE</a>
<a href="#">FOUR</a>
</div>
<br><br>
<div>
<h2>AAa</h2>
<p>adasasdasdasddasd</p>
</div>
<div>
<h2>asdsdsadAAa</h2>
<p>adasasdasdasadadazzsdadasddasd</p>
</div>
<div>
<h2>vvvvvAa</h2>
<p>adasasdasdasdasdasdasdadasdasd</p>
</div>
<div>
<h2>zzzddd</h2>
<p>adasasdasdasdddasdadasdasd</p>
</div>
</div>
</body>
<script type="text/javascript">
var $content=$(".tabs div:not('.header')");
var $header=$(".tabs div:first a");
var cur=0;
var timer;
function play_tab(){
cur++;
cur%=4;
$header.css("border-bottom-color","orange");
$('#tab'+cur).css("border-bottom-color","gray");
$content.css("display","none");
$('._tab'+cur).fadeIn();
}
jQuery(function(){
var i;
i=0;
//用for循环无效
$content.each(function(){
$(this).addClass("_tab"+i).addClass("content");
i++;
})
$content.css("display","none");
$("._tab0").fadeIn();
i=0;
$header.each(function(){
$(this).attr("id","tab"+i);
if (i==0){
$(this).css("border-bottom-color","gray");
}
i++;
})
$header
.click(function(e){
e.preventDefault();
})
.mouseover(function(){
clearInterval(timer)
$header.css("border-bottom-color","orange");
$(this).css("border-bottom-color","gray");
$(this).animate({"width":"100px"},250);
$content.css("display","none");
$("._"+$(this).attr("id")).fadeIn();
})
.mouseleave(function(){
timer=setInterval("play_tab()", 2000);
$(this).animate({"width":"80px"},250);
cur=Number($(this).attr('id')[3]);
});
timer=setInterval("play_tab()", 2000);
})
</script>
</html>
效果如下:
更多实际运行的动态效果请点击:在线演示