一个首页框架包含（侧面导航的高亮写法）

最新推荐文章于 2021-08-21 09:09:09 发布

遗失的小许

最新推荐文章于 2021-08-21 09:09:09 发布

阅读量512

点赞数

分类专栏： html javascript jquery

本文链接：https://blog.csdn.net/xuxuechao6/article/details/60575075

版权

html 同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

javascript

18 篇文章 0 订阅

订阅专栏

jquery

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>管理后台</title>
    <script type="text/javascript" src="/static/js/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="/static/admin/css/common.css">
    <link rel="stylesheet" href="/static/admin/css/serviceset.css">
    <link href="/static/css/page.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="head" class="head">
    <img src="/static/admin/images/logo_1024.png" alt="logo">
    <span></span>
    <ul>
        <li><a href="{#:url('channel/serviceset/getserviceset',array('token'=>$_GET['token']))#}">业务设置</a></li>
        <li>
            <a href="{#:url('channel/worker/getworkerdetail',array('user_api_id'=>'','token'=>$_GET['token']))#}">修改密码</a>
        </li>
        <li><a href="{#:url('index/Login/index',array('out'=>1))#}">退出</a></li>
    </ul>
</div>
<div id="menu" class="menu">
    菜单加载中...
</div>
<script type="text/javascript">
    var token = '{#$Request.param.token#}';
    $(document).ready(function () {
        getMenu();
    });


    function getMenu() {
        //getJSON 是异步进行加载的
        $.getJSON('{#:url("index/index/get_menu")#}', {'token': token}, function (res) {
            if (res.status == 0) {
                var str = '';
                if (res.data.length > 0) {
                    for (var i = 0; i < res.data.length; i++) {
                        if (res.data[i].level == 1) {
                            str += '<li class="top" >';
                            if (res.data[i].link == '') {
                                str += res.data[i].name;
                            } else {
                                str += '<a href="' + res.data[i].link + '"><img src="' + res.data[i].pic_url + '" alt="">' + res.data[i].name + '</a>';
                            }
                            str += '</li>';
//                            str+='<a href="'+res.data[i].link+'">'+res.data[i].name+'</a></li>';
                        } else {
                            str += '<li class="level2">';
                            if (res.data[i].link == '') {
                                str += res.data[i].name;
                            } else {
                                str += '<a href="' + res.data[i].link + '">' + res.data[i].name + '</a>';
                            }
                            str += '</li>';
                        }
                    }
                    $('#menu').html(str);

                    //获取页面的链接
                    var nowUrl = window.location.href;
                    nowUrl = nowUrl.split('/');//分离成数组 取最后边的一个 然后给他的父级添加class
                    $('.top a[href*="' + nowUrl[nowUrl.length - 1] + '"]').parent().addClass('menu_on');
                }
            }
        });
    }
    //判断控制页面初始时左右的高度一致
    window.onload = function () {
        var hl = $(".menu").outerHeight(); //获取左侧left层的高度
        var hr = $(".main").outerHeight(); //获取右侧right层的高度
        var mh = Math.max(hl, hr); //比较hl与hr的高度，并将最大值赋给变量mh
        $(".menu").height(mh); //将left层高度设为最大高度mh
        $(".main").height(mh); //将right层高度设为最大高度
    }
</script>

遗失的小许

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个首页框架包含（侧面导航的高亮写法）

html>head lang="en"> meta charset="UTF-8"> title>管理后台title> script type="text/javascript" src="/static/js/jquery-1.11.2.min.js">script> link rel="stylesheet" href="/static/admin/css/c
复制链接

扫一扫