Question

我有3个导航标签。中间选项卡具有一个数据表，其中的分页链接显示1 ... 100。如何设计代码，以便每次单击不同的分页链接时，它都打开到下一组页面并停留在中间选项卡上？现在，当我单击任何分页链接时，它将带我到第一个导航标签。当我单击第二个导航选项卡时，数据表显示了正确的分页页面集，因此分页部分似乎正在工作，但是我不知道如何使导航选项卡正确切换。我发现this有关如何使用JavaScript切换导航标签的信息。看来我需要在javascript中加入一些逻辑，以便当用户单击分页链接时，它会触发nav-tab开关。但是，我不确定如何实现这一点。

app.py

from flask import Flask, render_template
app=Flask(__name__)
@app.route('/')
def main():
    return render_template('page.html')

if __name__ == '__main__':
    app.run(debug=True)

main.html

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>

    {% include datatable.html %}

  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>more content from menu 2.</p>
  </div>
</div>

datatable.html

{% block body %}
<head>
<script type='text/javascript' src='/static/js/switchnavtab.js'></script>
</head>
<!--... data table code-->
{% for page in Pages.iter_pages() %}
  {% if page %}
    <a class="btn btn-info" href="{{url_for('main',page=page) }}">{{page}}</a>
  {% else %}
    <span>...<span>
  {% endif %}
{% endfor %}
{% endblock %}

switchnavtab.js

function activaTab(tab){
  $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

在烧瓶应用程序中单击分页链接时切换导航选项卡？

0 个答案: