Question

我正在玩Flask和Bootstrap。我将导航设置为nav-tabs，并尝试将活动类设置为活动选项卡。首次单击链接时它会瞬间工作，但会立即恢复为默认状态。我在这里有点不知所措，我们将非常感谢您对此发生了什么/原因的任何解释。

这是我的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的list元素。

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>

我希望你发现这很有用：）

使用Flask启动class.active函数

3 个答案: