时间戳

首页 > 解决方案 > Flask：引导导航选项卡的内容

javascript - Flask：引导导航选项卡的内容

问题描述

我想在每个选项卡下创建 4 个不同的页面/视图，其中将动态加载信息。我只能加载一个标签（健康）。我没有看到其他选项卡的内容。我该怎么做才能显示每个选项卡的内容？

布局.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="icon" href="https://cdn2.iconfinder.com/data/icons/toolix-circular/125/spatula_scraper_tool_workshop_DIY-512.png">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <title>Scraper</title>
  </head>
  <body style="background-color: black">

    <ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="pills-wellness-tab" data-toggle="pill" href="#pills-wellness" role="tab" aria-controls="pills-wellness" aria-selected="true">Wellness</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="pills-ratemds-tab" data-toggle="pill" href="#pills-ratemds" role="tab" aria-controls="pills-ratemds" aria-selected="false">RateMDs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="pills-healthgrades-tab" data-toggle="pill" href="#pills-healthgrades" role="tab" aria-controls="pills-healthgrades" aria-selected="false">Healthgrades</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="pills-gaswork-tab" data-toggle="pill" href="#pills-gaswork" role="tab" aria-controls="pills-gaswork" aria-selected="false">Gaswork</a>
      </li>
    </ul>

    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="pills-wellness" role="tabpanel" aria-labelledby="pills-wellnes-tab">
      {% block wellness %}{% endblock %}</div>
      <div class="tab-pane fade" id="pills-ratemds" role="tabpanel" aria-labelledby="pills-ratemds-tab">
      {% block ratemds %}{% endblock %}</div>
      <div class="tab-pane fade" id="pills-healthgrades" role="tabpanel" aria-labelledby="pills-healthgrades-tab">
      {% block healthgrades %}{% endblock %}</div>
      <div class="tab-pane fade" id="pills-gaswork" role="tabpanel" aria-labelledby="pills-gaswork-tab">
      {% block gaswork %}{% endblock %}</div>
    </div>

  </body>
</html>

烧瓶应用

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

标签： javascriptpythonhtmlflask

解决方案

包含标签对于包含模板很有用

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-wellness" role="tabpanel" aria-labelledby="pills-wellnes-tab">
  {% include 'includes/wellness.html'%}</div>
  <div class="tab-pane fade" id="pills-ratemds" role="tabpanel" aria-labelledby="pills-ratemds-tab">
  {% include 'includes/ratemds.html'%}</div>
  <div class="tab-pane fade" id="pills-healthgrades" role="tabpanel" aria-labelledby="pills-healthgrades-tab">
  {% include 'includes/healthgrades.html'%}</div>
  <div class="tab-pane fade" id="pills-gaswork" role="tabpanel" aria-labelledby="pills-gaswork-tab">
  {% include 'includes/gaswork.html'%}</div>
</div>

https://jinja.palletsprojects.com/en/2.11.x/templates/

推荐阅读