bootstrap nav-tab的内容未显示

时间:2015-08-05 14:27:47

标签: html twitter-bootstrap flask

我有一个从数据库填充的位置列表。然后我使用flask和bootstrap为列表中的每次迭代显示nav-tabs

当我遍历它时,我为列表中的每个位置动态创建一个nav-tab。然后具有特定于该选项卡的动态数据

我已经能够将这些位置作为导航标签名称。我没有看到每个标签的内容。

问:我做错了什么导致每个标签的内容都没有显示?

__ init.py __

engine = create_engine('mysql://user:passwd@ip_add/db')
insp = reflection.Inspector.from_engine(engine)
locations = []
for i in insp.get_table_names():
    locations.append(str(i))

@app.route('/dashboard/')
@login_required
def dashboard():
    return render_template("dashboard.html", TOPIC_DICT = TOPIC_DICT, locations=locations)

dashboard.html

{% extends "header.html" %}

{% block body %}
<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    {% for loc in locations %}
    <li role="presentation"><a href="#home" aria-controls="{{ loc }}" role="tab" data-toggle="tab">{{ loc }}</a></li>
    {% endfor %}
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
  {% for loc in locations %}
    <div role="tabpanel" class="tab-pane fade" id="{{ loc }}">stuff for {{ loc }}</div>
  {% endfor %}
  </div>

</div>


{% endblock %}

浏览器查看屏幕截图

enter image description here

浏览器页面来源

当我查看页面来源时,我可以看到PRETORIA&#39;的内容和内容,但不会显示在页面上。

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">

    <li role="presentation"><a href="#home" aria-controls="GTSP" role="tab" data-toggle="tab">GTSP</a></li>

    <li role="presentation"><a href="#home" aria-controls="PRETORIA" role="tab" data-toggle="tab">PRETORIA</a></li>

  </ul>

  <!-- Tab panes -->
  <div class="tab-content">

    <div role="tabpanel" class="tab-pane fade" id="GTSP">stuff for GTSP</div>

    <div role="tabpanel" class="tab-pane fade" id="PRETORIA">stuff for PRETORIA</div>

  </div>

</div>

1 个答案:

答案 0 :(得分:2)

错误是导航标签中的@OneToMany List<PendingActionJobs>链接到不正确的a href:每个都应链接到相应标签内容的id

  

id

所以你应该在你的jinja2模板中设置<li role="presentation"><a href="#GTSP" aria-controls="GTSP" role="tab" data-toggle="tab">GTSP</a></li> <li role="presentation"><a href="#PRETORIA" aria-controls="PRETORIA" role="tab" data-toggle="tab">PRETORIA</a></li> 这样的设置:

href

了解如何设置 <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> {% for loc in locations %} <li role="presentation"><a href="#{{ loc }}" aria-controls="{{ loc }}" role="tab" data-toggle="tab">{{ loc }}</a></li> {% endfor %} </ul> 属性:

href