Bootstrap class.active function with Flask

Я играю с Flask и Bootstrap. У меня есть моя настройка навигации в качестве навигационных вкладок, и я пытаюсь установить активный класс на активную вкладку. Он работает в течение секунды, когда ссылка сначала нажата, а затем сразу возвращается к состоянию по умолчанию. Я немного растерялся здесь, и любое объяснение относительно того, что/почему это происходит, было бы весьма полезно.Bootstrap class.active function with Flask

Вот мой 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

Последний скрипт в написанном мной коде действительно меняет класс. Как я уже сказал, я могу, что он меняет класс на долю секунды, но потом все возвращается к умолчанию почти так же, как при загрузке шаблона layout.html дважды – bmeredith

Ваш JavaScript работает на исходной странице. Как только браузер загружает новую страницу, состояние забывается. – dirn

В вашем методе маршрута, включает в себя переменное сказать шаблон рендеринга какой страницы пользователя включен.

@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

Нет необходимости добавлять «страницу» в контекст шаблона. Внутри шаблона вы можете просто получить доступ к 'request.endpoint' и использовать это вместо этого. Например, '{% if request.endpoint == 'some_page'%}'. – volker238

Вы также можете использовать JQuery/дзиндзя-хак. Идентификаторы установки для элементов, которые совпадают с конечными точками приложений. Как так:

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

Нет необходимости в дополнительных переменных или условных проверок, только список-элемент, который имеет тот же идентификатор, конечная точка подсвечивается.

источник

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

Bootstrap class.active function with Flask

ответ

Смежные вопросы