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頁面內(nèi)容
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)
}
});
// 點(diǎn)按菜單切換導(dǎo)航
$(".sidebar-menu .menu").click(function(){
// 菜單效果
if($(this).hasClass("active")==false){
$(this).addClass("active").siblings().removeClass("active");
// 切換頁面內(nèi)容
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 工作計(jì)劃 1</h2>
workSummary.html
<h2>2 工作計(jì)劃 2</h2>
