我在玩 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>

#1楼 票数:3 已采纳

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

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

#2楼 票数:1

您还可以使用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 的列表元素。

#3楼 票数:1

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

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

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

  ask by bmeredith translate from so

未解决问题?本站智能推荐:

2回复

bootstrap选择不显示项目

我想在我的python烧瓶网页中使用bootstrap-select 。 以下是我目前的代码。 虽然选择作品的数据实时搜索,但选择不显示除所选项目之外的任何项目。 我甚至刷新了$(document).ready() 。 我究竟做错了什么?
1回复

PythonFlask模板渲染后隐藏Bootstrap模式

我是Python和Flask的新手,所以我不确定我是否正确地采用了这种方式。 我有2个Bootstrap模态。 一个显示一个通用的“请等待加载”微调器,当我的python从服务器获取一个JSON字符串时,应显示该微调器,将该字符串处理为JSON并存储它。 仅当存在身份验证失败时,才会显示第
1回复

从Multiselect下载JqueryBoostrap与Flask获取值

我在Flask和Jinga模板中编写了一个bootstrap和jQuery Web表单,试图在单击Update Data按钮时获取多选下拉列表的值。 模板代码: 在Flask文件中,我试图通过request.form['account_picks']获取值,这适用于所有其他类型的输入框,
1回复

使用Flask和JQuery,如何以“性感”方式通过“POST”方法删除记录?

我正在使用Flask制作一个小型Web应用程序。 我需要在此应用中实施CRUD操作。 我的主要问题是如何以正确且“性感”的方式实施“删除”操作。 我最初可以使用“ GET”方法实现“删除”操作。 但是,在阅读了一堆文档之后,我发现这肯定不是一个好方法。 因此,我尝试了一些解决方案以通
2回复

Flask-Bootstrap如何工作?

我正在学习Flask Web开发,我正在学习的教程介绍了一个名为Flask-Bootstrap的扩展。 要使用此扩展,必须先将其初始化,如下所示: 奇怪的是,我的模块的其余部分没有使用变量bootstrap 。 但是,如果我注释掉这一行,将引发jinja2.exceptions.Temp
1回复

Bootstrap和Flask:如何接收POST?

我正在设计一个使用Bootstrap和Flask的小型网络计算器。 但是我快结束了,这是我的代码: 这是index.html的一部分: 因此,我希望收到一个POST,并返回结果。 但是,当我尝试运行程序时,请输入这两个数字并提交。 该程序未收到POST,以下是日志: 因此程序收
2回复

Flask-security和Bootstrap

如何使用Bootstrap设置Flask-security登录站点的样式? html表单如下所示: Bootstrap已实现,但我不知道如何编辑字段和提交按钮..
1回复

Bootstrap变量传递给Flask

首先,很抱歉,如果这是一个愚蠢的问题,但是我有点被困住了。 我想将HTML / Bootstrap页面中的几个变量传递给Flask。 变量以一种形式获得。 该变量将从下拉列表中选择。 从mySQL2中选择变量后,应将其存储在customername 。 目前,我有此示例代码根本不