- 方案1:采集li和父级nav块的index,利用if判断,采用jquery的ajax.load方式,无刷新导入。
- 方案2:给每个li设置不同的url,后台页面获取url参数后进行include。
建议方案1,体验好,代码少。
JS代码参考:
$(document).ready(function() {
load_html('00');
$(".nav_b ul li").on("click",function(){
let a = $(this).index();
let b = $(this).parent("ul").parent(".nav_b").parent(".nav").index();
let c = a.toString();
let d = b.toString();
id = d+c;
load_html(id);
})
});
function load_html(id){
let url;
if(id=='00'){
url = 'welcome.html';
}
if(id=='10'){
url = 'p1_0.html';
}
if(id=='11'){
url = 'p1_1.html';
}
if(id=='12'){
url = 'p1_2.html';
}
if(id=='20'){
url = 'p2_0.html';
}
if(id=='21'){
url = 'p2_1.html';
}
if(id=='22'){
url = 'p2_2.html';
}
$("#right_content").load(url);
}
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/admin/css/public.css">
<script src="/static/public/js/cdn/jquery.min.js"></script>
<script src="/static/admin/js/nav.js"></script>
<script src="/static/admin/js/load.js"></script>
<title>demo</title>
</head>
<body>
<div class="top">{include file="admin/top"}</div>
<div class="main">
<div class="left">{include file="admin/left"}</div>
<div class="right">
<div id="right_content"></div>
</div>
</div>
</body>
</html>