网站后台导航架构思考

64 阅读1分钟
  • 方案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>