bme*_*ith 1 jquery flask twitter-bootstrap
我正在使用 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>
在您的路由方法中，包含一个变量来告诉模板呈现用户所在的页面。
@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>