<!DOCTYPE html>
<meta charset="utf-8">
<title>tab选项卡学习</title>
<style>
html,body,ul,li{padding:0;margin:0}
ul{list-style-type:none}
.nav{height:31px}
.nav li{float:left;padding:0 10px;line-height:31px;background:#ccc;margin-right:10px;cursor:pointer;display:inline}
.nav li.cur{background:#000;color:#fff}
.navcon div{300px;border:1px solid #ccc;line-height:300px;height:300px;text-align:center}
.hidden{display:none}
</style>
<ul class="nav">
<li class="cur">第一项
<li>第二项
<li>第三项
</ul>
<div class="navcon">
<div><div>第1项内容</div></div>
<div class="hidden"><div>第2项内容</div></div>
<div class="hidden"><div>第3项内容</div></div>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(".nav li").mouseover(function(){
var index=$(this).index();
$(this).addClass("cur").siblings().removeClass("cur");//当前标签
$(".navcon>div").eq(index).show().siblings().hide();//当前内容
});
</script>