<html>
<head>
<style type="text/css">
.divtab .tabhead{font-size: 14px;color: #a7a7a7;}
.divtab .tabhead .tabhead-list{position: relative;top: 3px;height: 27px;margin: 0;padding: 0;border-bottom: 2px solid #f0f0f0;}
.divtab .tabhead .tabhead-list li{line-height: 21px;display: inline-block;float: left;width: 90px;text-align: center;*zoom: 1;*display: inline;}
.divtab .tabhead .tabhead-list li.on{color: #e55555;}
.divtab .tabhead .tabhead-list li:hover{cursor: pointer;}
.divtab .tabhead .tabhead-list p{position: absolute;top: 27px;width: 90px;height: 2px;margin: 0;background: #e55555;}
.divtab .tabbody{padding-top: 12px;}
.divtab .tabbody .tabone{position: relative;display: none;overflow: auto;}
.divtab .tabbody .tabone.show{display: block;}
</style>
</head>
<body>
<div class="divtab">
<div class="tabhead">
<ul class="tabhead-list">
<li id="atab" class="on">A</li>
<li id="btab">B</li>
<li id="ctab">C</li>
<li id="dtab">D</li>
<li id="etab">E</li>
<li id="ftab">F</li>
<p></p>
</ul>
</div>
<div class="tabbody">
<div class="tabone show" id="Acon">AAAAA</div>
<div class="tabone" id="Bcon">BBBBB</div>
<div class="tabone" id="Ccon">CCCCC</div>
<div class="tabone" id="Dcon">DDDDD</div>
<div class="tabone" id="Econ">EEEEE</div>
<div class="tabone" id="Fcon">FFFFF</div>
</div>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script language="javascript">
$(function() {
$('.tabhead-list li').mouseover(function() {
$(this).css("cursor", "pointer");
});
$('.tabhead-list li').click(function() {
var liindex = $('.tabhead-list li').index(this);
$(this).addClass('on').siblings().removeClass('on'); //.siblings() 获得匹配集合中每个元素的同胞
$('.tabbody div.tabone').eq(liindex).fadeIn(150).siblings('div.tabone').hide();
var liWidth = $('.tabhead-list li').width();
$('.divtab .tabhead-list p').stop(false, true).animate({
'left': liindex * liWidth + 'px'
}, 300);
});
});
</script>
</body>
</html>
