Материализуйте вкладки CSS и флаги

Я работаю с http://materializecss.com/ и Flask, чтобы создать панель инструментов, и одна из функций, которыми я пользуюсь, - это их вкладка. К сожалению, я, похоже, не могу настроить вкладку активным после того, как сделаю почтовый запрос на свой сервер.Материализуйте вкладки CSS и флаги

Это то, что я в настоящее время для моего Колба кода и мой 2 шаблоны:

Колба Код:

@app.route('/') 
def home(): 
    return render_template("tabs.html") 

@app.route("/", methods=['POST']) 
def results(): 
    return render_template('results.html', data=data['reports']) 


if __name__ == "__main__": 
    app.debug = True 
    app.run()

Layout.html:

<body> 
    <div class="row"> 
    <div class="col s12"> 
     <ul class="tabs"> 
     <li class="tab col s3" id="n"><a href="#news">News</a></li> 
     <li class="tab col s3" id="s"><a href="#search">Search</a></li> 
     <li class="tab col s3" id="t"><a href="#twitter">Twitter</a></li> 
     </ul> 
    </div> 
    <div id="news" class="col s12"> 
     {% block news %}{% endblock%} 
    </div> 
    <div id="search" class="col s12"> 
     {% block search %}{% endblock%} 
    </div> 
    <div id="twitter" class="col s12"> 
     {% block twitter %}{% endblock%} 
    </div> 
    </div> 


    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="static/js/materialize.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('ul.tabs').tabs(); 
    }); 
    </script> 
</body>

tabs.html:

{% extends "layout.html" %} 
{% block news %} 
<h1>News</h1> 
{% endblock %} 
{% block search %} 
<form id="search" class="col s12" action="{{ url_for('results') }}" method="POST"> 
    <div class="row"> 
    <div class="input-field col s6"> 
     <input id="Address" type="text" class="validate" name="Address"> 
     <label for="Address">Address</label> 
    </div> 
    <div class="input-field col s6"> 
     <button class="btn waves-effect waves-light" type="submit" name="action">Submit 
     <i class="material-icons right">search</i> 
     </button> 
    </div> 
    </div> 
</form> 
     {% block results %}{% endblock%} 
{% endblock%} 
{% block twitter %} 
<h1>TWITTER</h1> 
{% endblock %}

Теперь что Я встречаюсь, когда я нажимаю для поиска по вкладке поиска, я возвращаюсь к активной вкладке «Новости». Когда я нажимаю вкладку поиска, мой блок результатов там и точен, но я пытаюсь найти способ, чтобы он не устанавливал активную вкладку обратно по умолчанию.

Я посмотрел на http://jinja.pocoo.org/docs/dev/tricks/ и используя

{% extends "layout.html" %} 
{% set active_page = "index" %}

но не кажется, работает как JQuery, который используется materializeCss либо конфликтов с ним или козыри его.

Я также посмотрел на использовании ручной настройки materializeCSS Jquery активной вкладки с помощью

$(document).ready(function(){ 
    $('ul.tabs').tabs('select_tab', 'tab_id'); 
    });

, который я поставил в обоих layout.html и tabs.html, и я не могу показаться, чтобы получить эту работу или.

Все мысли и помощь оценили

Спасибо.

источник

2015-12-20 FPcond

Не уверен, что он будет работать в вашем случае, но я использую материализацию с Atom Electron и не могу изменить вкладки с помощью кнопок/значков и не мог заставить работать метод select_tab. В результате я добавил свою собственную функцию для изменения вкладок с помощью методов «onclick», используя следующий jquery:

function selectTab(id) { 
    $(document).find('a[href="#' + id + '"]').trigger('click'); 
}

источник

2016-01-13 10:40:51 washout13

Материализуйте вкладки CSS и флаги

ответ

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