526互联

flask + layui框体 + iframe，实现点击左侧菜单，显示不同页面

发布时间 2023-12-04 15:01:04作者: 你说夕阳很美

重点解析：

1、主要变动src中的链接，这里是flask的视图函数

<iframe id="iframe" src="daily_unconfirmed_issues" style="width: 100%; height: 550px;"></iframe>
@app.route('/daily_unconfirmed_issues')
def daily_unconfirmed_issues_view():
    return render_template('daily_unconfirmed_issues.html', mantis_ip=mantis_ip)

2、

<li class="layui-nav-item myDivClass" id="settings">
    <a href="javascript:;">设置</a>
</li>

点击菜单，获取点击菜单的id值，然后把iframe里的src换成id值

$('.myDivClass').on('click', function () {
            // 使用$(this)引用被点击的元素
            // 修改iframe的src
            var id = $(this).attr('id');
            $("#iframe").attr("src", id);
        });

下面是完整的html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mantis issues统计报告</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">Mantis issues统计报告</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item myDivClass layui-this" id="daily_unconfirmed_issues">
                    <a href="javascript:;">每天未确认issues</a>
                </li>
                <li class="layui-nav-item myDivClass" id="daily_issues_status_changes">
                    <a href="javascript:;">每天issues状态变化</a>
                </li>
                <li class="layui-nav-item myDivClass" id="longTime_unconfirmed_issues">
                    <a href="javascript:;">长时间未确认issues预警</a></li>
                <li class="layui-nav-item myDivClass" id="longTime_not_closed_issues">
                    <a href="javascript:;">长时间未关闭issues</a>
                </li>
                <li class="layui-nav-item myDivClass" id="closed_issues_lifecycle">
                    <a href="javascript:;">已关闭issues生命周期</a>
                </li>
                <li class="layui-nav-item myDivClass" id="settings">
                    <a href="javascript:;">设置</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-card layui-panel">
                <div class="layui-card-body">
                    <iframe id="iframe" src="daily_unconfirmed_issues" style="width: 100%; height: 550px;"></iframe>
                </div>
            </div>
        </div>
        <br><br>
    </div>
</div>
<div class="layui-footer">
    <!-- 底部固定区域 -->
    Mantis issues统计报告
</div>

<script src="/static/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table
        var $ = layui.$;

        $('.myDivClass').on('click', function () {
            // 使用$(this)引用被点击的元素
            // 修改iframe的src
            var id = $(this).attr('id');
            $("#iframe").attr("src", id);
        });


    });
</script>
</body>
</html>