flask左边导航栏，右边内容，阻止页面跳转问题jquery引用

为了在Flask中实现左边导航栏和右边内容的布局，你可以使用Bootstrap或其他CSS框架来简化布局设计。以下是一个简单的例子，展示了如何使用Bootstrap创建一个带有左侧导航栏和右侧内容区域的基本页面模板。

首先，确保你已经在你的Flask模板中引入了Bootstrap的CSS和JavaScript文件。你可以从CDN引入，或者把文件放在你的静态文件夹中并在模板中引入。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask Template</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-2 sidebar">
                <!-- 左侧导航栏 -->
                <nav class="navbar navbar-expand-sm bg-light navbar-light">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">导航项1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">导航项2</a>
                        </li>
                        <!-- 更多导航项 -->
                    </ul>
                </nav>
            </div>
            <div class="col-sm-10 content">
                <!-- 右侧内容区域 -->
                <div class="p-4">
                    <h2>内容标题</h2>
                    <p>这里是内容...</p>
                    <!-- 更多内容 -->
                </div>
            </div>
        </div>
    </div>
 
    <!-- 引入jQuery和Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

在上述代码中，我们使用了Bootstrap的网格系统来创建一个12列的网格。左边的导航栏占据2列（col-sm-2），内容区域占据10列（col-sm-10）。这样，无论屏幕尺寸如何变化，左边的导航栏总是固定宽度，而右边的内容区域会填充剩余空间。

注意，以上代码没有涉及到阻止页面跳转的问题。如果你想通过点击左侧的导航链接来更新右侧内容区域而不是导致页面刷新，你可能需要使用AJAX调用。但是，这需要额外的JavaScript代码来处理请求和响应。

如果你需要使用AJAX来更新内容区域，你可以使用jQuery来实现：




$(document).ready(function() {
    $('.nav-link').click(function(e) {
        e.preventDefault(); // 阻止默认的点击行为
        var url = $(this).attr('href'); // 获取链接的URL
 
        // 使用AJAX请求新内容，并更新.content区域
        $.get(url, function(data) {
            $('.content').html(data);
        }).fail(function() {
            alert('内容加载失败！');
        });
    });
});

在这段代码中，我们为所有.nav-link的点击事件添加了一个处理函数，在这个函数中我们阻止了默

flask左边导航栏，右边内容，阻止页面跳转问题jquery引用

评论已关闭

推荐阅读