效果圖如下
代碼如下
<html>
<head>
<title></title>
</head>
<style>
*{
margin:0;
padding:0;
}
.tab{
margin:0 auto;
}
.nav{
height:20px;
width:240px;
background:yellow;
}
.nav>li{
width:60px;
height:20px;
float:left;
list-style:none;
text-align:center;
line-height:20px;
}
.nav .showtab{
background:#ccc;
}
.content{
width:240px;
height:200px;
background:red;
}
.content div{
display:none;
}
.content .show-content{
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('.nav>li').mouseenter(function(){ //獲取到所有的li，並且加入移入事件
$('.nav>li').eq(0).removeClass('showtab'); //默認是第一個tab，這樣是去除第一個tab樣式，如果不加這行代碼，鼠標直接移到tab2,3,4，tab1樣式還在
$('.content>div').eq(0).removeClass('show-content') //上面同理
$(this).addClass('showtab'); //$(this)指鼠標進入的那個li的對象，給它添加一個樣式
var $index=$(this).index(); //$(this).index()指下標，表示移到第幾個tab，這樣就可以與下面div對應，第一個tab對應第一個div
$('.content>div').eq($index).addClass('show-content') //移到哪個tab，就給哪個div添加類
})
$('.nav>li').mouseleave(function(){ //獲取所有li，並且加入移除事件
$(this).removeClass('showtab'); //當從一個tab移到另一個tab，需要把之前的tab樣式給去除，回復原樣
var $index=$(this).index();
$('.content>div').eq($index).removeClass('show-content') //tab樣式移除了，相應的div樣式也需要移除
})
$('.nav').mouseleave(function(){ //給整體的tab選項卡加個移除事件，如果不加，當鼠標不在tab里，發現tab和div都是沒有選中
$('.nav>li').eq(0).addClass('showtab'); //當鼠標移除選項卡，樣式恢復到最初的模樣
$('.content>div').eq(0).addClass('show-content')
})
})
</script>
<body>
<div class="tab">
<ul class="nav">
<li class="showtab">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div class="content">
<div class="show-content">tab1</div>
<div>tab2</div>
<div>tab3</div>
<div>tab4</div>
</div>
</div>
</body>
</html>