Bootstrap class.active Flask 函数

Question

我正在玩 Flask 和 Bootstrap。我将导航设置为导航选项卡，并试图将活动 class 设置为活动选项卡。当第一次点击 link 时，它会在一瞬间起作用，但随后会立即恢复到默认状态。我在这里有点不知所措，对于 what/why 发生这种情况的任何解释将不胜感激。

这是我的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>

我希望你发现这个有用:)

Bootstrap class.active Flask 函数

Bootstrap class.active function with Flask

jquery

flask

twitter-bootstrap