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

Question

I want to make 4 different pages / views under each tab in which information will be loaded dynamically.我想在每个选项卡下创建 4 个不同的页面/视图，其中将动态加载信息。 I can only load one tab(wellness).我只能加载一个标签（健康）。 I do not see content for other tabs.我没有看到其他选项卡的内容。 What can I do to make the contents of each tab appear?我该怎么做才能显示每个选项卡的内容？

layout.html布局.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>

flask app flask 应用程序

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

Answer 1

The include tag is useful to include a template包含标签对于包含模板很有用

<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/ https://jinja.palletsprojects.com/en/2.11.x/templates/

Answer 2

Well you can use iframe tag with a little bit of css in it!好吧，您可以使用 iframe 标签和一点 css ！

Just use this inside of your div tag where you want to display your html page只需在要显示 html 页面的 div 标签内使用它

<iframe src="yourpage.html"style="border: none;" width="100%" >

This is what your div tags looks like这就是你的div标签的样子

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-wellness" role="tabpanel" aria-labelledby="pills-wellnes-tab">
    <iframe src="firstpage.html"style="border: none;" width="100%" ></iframe></div>

  <div class="tab-pane fade" id="pills-ratemds" role="tabpanel" aria-labelledby="pills-ratemds-tab">
    <iframe src="secondpage.html"style="border: none;" width="100%" ></iframe></div>

  <div class="tab-pane fade" id="pills-healthgrades" role="tabpanel" aria-labelledby="pills-healthgrades-tab">
    <iframe src="thirdpage.html"style="border: none;" width="100%" ></iframe></div>

  <div class="tab-pane fade" id="pills-gaswork" role="tabpanel" aria-labelledby="pills-gaswork-tab">
    <iframe src="fourthpage.html"style="border: none;" width="100%" ></iframe></div>
</div>

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

问题描述

2 个解决方案

解决方案1
1 2020-05-13 17:43:48

解决方案2
0 2020-05-13 17:34:54

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

问题描述

2 个解决方案

解决方案1 1 2020-05-13 17:43:48

解决方案2 0 2020-05-13 17:34:54

解决方案1
1 2020-05-13 17:43:48

解决方案2
0 2020-05-13 17:34:54