带有Flask的Bootstrap class.active函数

我正在玩Flask和Bootstrap。我将导航设置为导航标签，并试图将活动类设置为活动标签。当链接第一次点击后，它会立即工作，但立即恢复到默认状态。我在这里有点茫然，任何解释为什么会发生这种情况将不胜感激。带有Flask的Bootstrap class.active函数

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

来源

2015-03-30 bmeredith

当用户点击一个链接，将它们发送到一个新页面，并没有设置你的主动类在新页面的HTML。 – dirn 2015-03-30 22:22:13

我发布的代码中的最后一个脚本实际上改变了这个类。正如我所说，我可以说，它改变了一秒的类，但然后它们都变回默认，就像它加载layout.html模板两次 – bmeredith 2015-03-30 22:27:59

您的JavaScript运行在原始页面上。一旦浏览器加载新页面，状态就会被遗忘。 – dirn 2015-03-30 22:42:22

在路线的方法，包括一个变量来告诉模板呈现用户哪一页上。

@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>

来源

2015-03-30 22:58:41 Celeo

感觉有点脏，但效果很好！谢谢 – bmeredith 2015-03-30 23:09:32

没有必要将'page'添加到模板上下文中。在模板内部，您可以访问'request.endpoint'并使用它。例如，'{％if request.endpoint =='some_page'％}'。 – volker238 2016-11-26 04:14:28

你也可以使用jQuery的/神社下锅。设置与应用程序端点相同的元素的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为同一列表元素端点被突出显示。

来源

2015-03-30 23:48:29 philmaweb

我解决了这个问题，就像你的一点帮助一样。

@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>

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

来源

2017-11-24 08:17:12

带有Flask的Bootstrap class.active函数

回答

相关问题