1. As shown in the figure:
2. Code:
<%@ 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://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/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>———————————————————————
If you need it, please add qq:136137465, if you are the one
(a full set of Java architect tutorials, a total of 760G, let you go from zero to architect , easily get 30,000 per month)
01. Senior architect 42 stages high
02. Java advanced system training architecture course 148 class hours
03. Java senior Internet architect course
04. Java Internet architecture Netty, Nio, Mina, etc. - video Tutorial
05. Java advanced architecture design 2016 finishing - video tutorial
06. Architect basics, advanced film 07. Java
architects must take linux operation and maintenance series courses Patterns and Data Structures, Spring Cloud Microservices, Getting Started with SpringBoot) ———————————————————————