一、如图：
二、代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/bootstrap/css/bootstrap-responsive.css" />
<script src="${pageContext.request.contextPath}/script/jquery.js"></script>
<!--[if lt IE 9]>
<script src="https:///libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https:///libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.tab ul li{list-style: none; padding: 0; margin: 0; text-align: center;}
.tab .tabfirst li {float: left; background-color: #222; color: #fff; padding: 5px; margin-right: 2px; border: 1px solid #fff;}
.tab .tabfirst li.tabin {background-color: #6E6E6E; border: 1px solid #6E6E6E; color: #fff; width: 100px;}
.tab div.contentfirst{clear:left; background-color: #6E6E6E; padding:10px; display:none; width: 400px; height: 50px; color:#fff; text-align: center;}
.tab div.contentin {display: block;}
.tab a:link {color:#fff; } /* 未被访问的链接 */
.tab a:visited {color:#fff;} /* 已被访问的链接 */
.tab a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
.tab a:active {color:#0000FF;} /* 正在被点击的链接 */
</style>
<script type="text/javascript">
$(function(){
/* $(".tab li").mouseover(function(){
$(".tab .contentin").hide();
}).mouseout(function(){
//$(".tab .contentin").hide();
}); */
$("li").each(function(index){
//每一个包装li的jquery对象都会执行function中的代码
//index是当前执行这个function代码的li对应在所有li组成的数组中的索引值
//有了index的值之后，就可以找到当前标签对应的内容区域
$(this).mouseover(function(){
var liNode = $(this);
timoutid = setTimeout(function(){
//将原来显示的内容区域进行隐藏
$("div.contentin").removeClass("contentin");
//对有tabin的class定义的li清除tabin的class
$(".tabfirst li.tabin").removeClass("tabin");
//当前标签所对应的内容区域显示出来
//$("div").eq(index).addClass("contentin");
$("div.contentfirst:eq(" + index + ")").addClass("contentin");
liNode.addClass("tabin");
},300);
}).mouseout(function(){
clearTimeout(timoutid);
});
});
});
</script>
</head>
<body>
<script src="${pageContext.request.contextPath}/script/bootstrap/js/bootstrap.js"></script>
<div class="container">
<h2>菜单切换</h2>
<div class="tab">
<ul class="tabfirst">
<li class="tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="contentin contentfirst">我是内容1</div>
<div class="contentfirst">我是内容2</div>
<div class="contentfirst">我是内容3</div>
</div>
</div>
</body>
</html>
