<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
background: gray;
text-align: center;
line-height: 30px;
padding: 5px 10px;
50px;
color: white;
float: left;
margin-right: 2px;
}
.menu li.tableIn {
background-color: #003580;
border: 1px solid #003580;
}
.menu:after {
content: '';
display: block;
clear: both;
overflow: hidden;
}
.content {
display: block;
background: #003580;
300px;
height: 300px;
color: white;
padding: 5px 10px;
}
.defaut {
display: none;
}
#load_menu li {
float: left;
padding: 3px 5px;
color: blue;
height: 30px;
line-height: 30px;
position: relative;
z-index: 99;
}
#load_menu:after{
content: '';
display: block;
clear: both;
overflow: hidden;
}
#load_menu .load_tableIn {
background: lightgray;
border: 1px solid black;
border-bottom: 0;
}
#load_content {
400px;
height: 300px;
background: lightgray;
clear: both;
border: solid 1px black;
position: relative;
top: -2px;
padding-top: 30px;
}
</style>
<script src="../jquery-2.2.4.min.js"></script>
<script>
$(window).load(function() {
var timeOutID = null;
$('.menu li').hover(function() {
var me = $(this);
//防止快速点击的方法。。。
//注意保留timeID,不然无法清除
//注意timeOut的第一个参数要写在本行
timeOutID = setTimeout(function() {
me.addClass('tableIn');
var lis = $('.menu li');
lis.each(function(index, value) {
var contentDiv = $('.container').children('div').eq(index);
//要转换为元素再等
if (me.get(0) != value) {
$(value).removeClass('tableIn');
contentDiv.removeClass('content');
contentDiv.addClass('defaut');
} else {
contentDiv.removeClass('defaut');
contentDiv.addClass('content');
}
});
}, 300);
}, function() {
clearTimeout(timeOutID);
})
//默认加载本地页面
$('#load_content .real_content').load("testload.html");
$('#load_menu li').on('click', function() {
var me = $(this);
//注意timeOut的第一个参数要写在本行
me.addClass('load_tableIn');
var lis = $('#load_menu li');
lis.each(function(index, value) {
var contentDiv = $('#load_content .real_content');
//要转换为元素再等
if (me.get(0) != value) {
$(value).removeClass('load_tableIn');
} else {
if (index == 0) {
contentDiv.load("testload.html");
} else if (index == 1) {
//这里没JSP，就没写了，也是用load方法
} else if (index == 2) {
}
}
});
})
});
</script>
</head>
<body>
<div class="container">
<ul class="menu">
<li class="tableIn">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="content">内容1</div>
<div class="defaut">内容2</div>
<div class="defaut">内容3</div>
</div>
<br />
<br/>
<ul id="load_menu">
<li class="load_tableIn">加载完整页面</li>
<li>加载部分JSP</li>
<li>加载全部JSP</li>
</ul>
<div id="load_content">
<div class="real_content"></div>
</div>
</body>
</html>