Github地址
index.html
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no">
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
</head>
<body>
<!--left Menu-->
<ul class="sidebar-menu">
<li data-pagecode="workSummary" class="menu active">
<span>菜单 ONE</span>
</li>
<li data-pagecode="workPlan" class='menu'>
<span>菜单 Two</span>
</li>
</ul>
<!--right content-->
<div class="content-wrapper"> </div>
</body>
<script type="text/javascript">
// 获取其他html页面内容
var code = $(".sidebar-menu .active").attr("data-pagecode");
$.ajax({
url: code + ".html",
type:"get",
data:{
code:code
},
dataType:"html",
success:function(data){
$(".content-wrapper").html(data)
}
});
// 点按菜单切换导航
$(".sidebar-menu .menu").click(function(){
// 菜单效果
if($(this).hasClass("active")==false){
$(this).addClass("active").siblings().removeClass("active");
// 切换页面内容
var code = $(this).attr("data-pagecode");
if(code){
$.ajax({
url:code + ".html",
type:"get",
dataType:"html",
success:function(data){
$(".content-wrapper").html(data);
}
})
}
}
});
</script>
</html>
workPlan.html
<h2>1 工作计划 1</h2>
workSummary.html
<h2>2 工作计划 2</h2>
