繁体 English 中英

Flask：引导选项卡

[英]Flask: Bootstrap Tabs

原文 2020-05-19 08:20:18 3 0 html/ jquery/ css/ twitter-bootstrap/ flask

我在动态加载信息的每个选项卡下制作了 4 个不同的页面/视图。 如果您在一个选项卡上下载信息并切换到另一个选项卡，那么它将被删除。 如何使所有选项卡彼此独立工作？

目录结构：

布局：

 <.doctype html> <html lang="en"> <head>... </head> <body> {% include 'includes/navbar.html' %} {% block body %} {% endblock %} </body> </html>

导航栏：

 <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="/">FAQ</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto"> <li class="nav-item"><a class="nav-link" href="/wellness">Wellness</a></li> <li class="nav-item"><a class="nav-link" href="/ratemds">RateMDs</a></li> <li class="nav-item"><a class="nav-link" href="/healthgrades">Healthgrades</a></li> <li class="nav-item"><a class="nav-link" href="/gaswork">Gaswork</a></li> </ul> </div> </nav>

健康：

 {% extends "layout.html" %} {% block title %} Wellness {% endblock %} {% block body %} <div class="input-group justify-content-center"> <input type="text" placeholder="Specialty" id="specialty" class="form-control col-3 mr-2"> <input type="text" placeholder="State" id="state" class="form-control col-3 mr-2"> <input type="text" placeholder="City" id="city" class="form-control col-3 mr-2"> <button id="scrape" class="btn btn-success mr-2">Scrape</button> </div> <p id="status" class="ml-4 text-center"></p> <div id="output" class="mt-4"></div> <script type="text/javascript">... </script> {% endblock %}

flask 应用程序：

@app.route('/')
def home():
    return render_template('faq.html')

@app.route('/<page_id>')
def page(page_id):
    page_name = f"{page_id}.html"
    return render_template(page_name)

标签切换：

127.0.0.1 - - [19/May/2020 13:45:57] "GET /wellness HTTP/1.1" 200 -
127.0.0.1 - - [19/May/2020 13:46:00] "GET /healthgrades HTTP/1.1" 200 -
127.0.0.1 - - [19/May/2020 13:46:05] "GET /gaswork HTTP/1.1" 200 -