首先，页面引入jQuery插件。
然后来个简单的html结构：
<ul>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
<div class="box">
<div class="content">内容一</div>
<div class="content">内容二</div>
<div class="content">内容三</div>
<div class="content">内容四</div>
</div>
然后添加一个css样式
ul {
height: 20px;
width: 300px;
}
ul>li {
float: left;
margin-right: 20px;
list-style: none;
}
.box {
border: 1px solid red;
width: 300px;
height: 200px;
}
.content {
display: none;
}
最后就是jQuery代码，实现hover标题一时显示内容一，标题二显示内容二等等，以此类推。
//页面加载时默认显示第一个
$("li").eq(0).css("color","blue");
$(".content").eq(0).css("display","block");
$("li").each(function (index) {
$(this).hover(function () {
$(this).css("color","blue").siblings().css("color","#000");
$(".content").eq(index).css("display","block").siblings().css("display","none");
})
})
这样，jQuery实现简单的tab菜单切换效果就实现了。
