带 Flask 的 Bootstrap class.active 函数

Question

我在玩 Flask 和 Bootstrap。 我的导航设置为导航选项卡，并试图将活动类设置为活动选项卡。 当第一次点击链接时，它会工作一瞬间，然后立即恢复到默认状态。 我在这里有点不知所措，对发生这种情况的原因/原因的任何解释都将不胜感激。

这是我的 layout.html。

<body>
<div id="container-fluid">
    <nav role="navigation">
        <ul class="nav nav-tabs">
            <li role="presentation" class=""><a href="{{url_for('index') }}" title="Home">Home</a></li>
            <li role="presentation" class=""><a href="#" title="Projects">Projects</a></li>
            <li role="presentation" class=""><a href="{{ url_for('about') }}" title="About">About</a></li>
        </ul>
    </nav>
    {% block content %}{% endblock %}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="static/bootstrap.min.js"></script>
<script>
$('.nav li a').on("click", function(e) {
    $(".nav li").removeClass("active");
    if (!$(this).parent().hasClass("active")) {
        $(this).parent().addClass("active");
    }
    /*e.preventDefault();*/
});
</script>

Answer 1

在您的路由方法中，包含一个变量来告诉模板呈现用户所在的页面。

@app.route('/somepage')
def some_page():
    return render_template('somepage.html', page='somepage')

并在 HTML 中，有条件地检查页面是否为当前页面：

<ul class="nav nav-tabs">
    <li role="presentation" {% if page == 'index' %}class="active"{% endif %}><a href="{{url_for('index') }}" title="Home">Home</a></li>
    <li role="presentation" {% if page == 'projects' %}class="active"{% endif %}><a href="#" title="Projects">Projects</a></li>
    <li role="presentation" {% if page == 'about' %}class="active"{% endif %}><a href="{{ url_for('about') }}" title="About">About</a></li>
</ul>

Answer 2

您还可以使用jquery/jinja-hack 。 为与应用程序端点相同的元素设置 ID。 像这样：

<body>
<div id="container-fluid">
  <nav role="navigation">
    <ul class="nav nav-tabs">
      <li id="home" role="presentation" class=""><a href="{{url_for('index') }}" title="Home">Home</a></li>
    </ul>
  </nav>
</div>

然后将其添加到基本布局模板的底部：

<script>
$(document).ready(function () {
$("#{{request.endpoint}}").addClass("active"); })
</script>

不需要额外的变量或条件检查，只突出显示与端点具有相同 id 的列表元素。

Answer 3

我这样解决了这个问题，对你有一点帮助。

@app.route("/profile")
def profile():
    page = request.args.get('page')
    return render_template('profile.html', page=page)

Then within the profile.html and tabpanel section:

<div role='tabpanel'>
  <div class='row'>
                    <ul class='nav nav-tabs' role='tablist' id='tabs'>
                            <li role='presentation' {% if page == 'index' %}class="active"{% endif %}><a href='#info' aria-controls='info' role='tab' data-toggle='tab' class='realtab'>info</a></li>
                            <li role='presentation' {% if page == 'edit' %}class="active"{% endif %}><a href='#edit' aria-controls='edit' role='tab' data-toggle='tab'>edit</a></li>
                            <li role='presentation' {% if page == 'messages' %}class="active"{% endif %}><a href='#messages' aria-controls='messages' role='tab' data-toggle='tab'>messages<span class='badge'>1</span></a></li>
                            <li role='presentation' {% if page == 'change_password' %}class="active"{% endif %}><a href='#change_password' aria-controls='change_password' role='tab' data-toggle='tab'>change_password</a></li>
                            <li><a href='/logout'>logout</a></li>
                    </ul>
  </div>
Further down within tab-content section:
            <div class='tab-content'>
                    <div role='tabpanel' class='tab-pane {{ 'active' if page == 'info' else '' }}' id='info'>
                    [...]
                    <div role='tabpanel' class='tab-pane {{ 'active' if page == 'edit' else '' }}' id='edit'>
                    [...]
                    <div role='tabpanel' class='tab-pane {{ 'active' if page == 'messages'  else '' }}' id='messages'>
                    [...]
                    <div role='tabpanel' class='tab-pane {{ 'active' if page == 'change_password' else '' }}' id='change_password'>

Finally at the bottom of the page:
<script>
{% if page == 'info' %}
$('#tabs li:eq(0) a').tab('show');
{% elif page == 'edit' %}
$('#tabs li:eq(1) a').tab('show');
{% elif page == 'messages' %}
$('#tabs li:eq(2) a').tab('show');
{% elif page == 'change_password' %}
$('#tabs li:eq(3) a').tab('show');
{% endif %}
</script>

我希望你觉得这很有用 :)