Question

我正在使用Twitter Bootstrap和Symfony 2与Twig。我的所有页面都有这个：

<div class="navbar navbar-inverse navbar-static-top"> 
            <div class="navbar-inner">
                <a class="brand" href="{{ path('home') }}">BudgetTracker</a>
                <ul class="nav">
                    <li class="active"><a href="{{ path('expenses') }}">Expenses</a></li>
                    <li><a href="#about">Reports</a></li>
                    <li><a href="{{ path('categories') }}">Categories</a></li>
                    <li><a href="#contact">Months</a></li>
                    <li><a href="#contact">Bank Accounts</a></li>
                    </ul>
            </div>
</div>

我不想在每个页面上复制它...问题是应该只为cuurent页面放置类active属性。有没有办法在不使用JavaScript的情况下成功，只有一些宏或包含？非常感谢你提前！

更新

<div class="navbar navbar-inverse navbar-static-top"> 
    <div class="navbar-inner">
        <a class="brand" href="{{ path('home') }}">BudgetTracker</a>
        <ul class="nav">
            {% if var == 'Expenses' %}
            <li class="active"><a href="{{ path('expenses') }}">Expenses</a></li>
            {% else %}
            <li><a href="{{ path('expenses') }}">Expenses</a></li>
            {% endif %}

            {% if var == 'Reports' %}
            <li class="active"><a href="#">Reports</a></li>
            {% else %}
            <li><a href="#">Reports</a></li>
            {% endif %}

            {% if var == 'Categories' %}
            <li class="active"><a href="{{ path('categories') }}">Categories</a></li>
            {% else %}
            <li><a href="{{ path('categories') }}">Categories</a></li>
            {% endif %}

            {% if var == 'Months' %}
            <li class="active"><a href="#">Months</a></li>
            {% else %}
            <li><a href="#">Months</a></li>
            {% endif %}

           {% if var == 'Bank Accounts' %}
            <li class="active"><li><a href="#">Bank Accounts</a></li>
            {% else %}
            <li><li><a href="#">Bank Accounts</a></li>
            {% endif %} 
            </ul>
    </div>
</div>

我不是很优雅的尝试。我称之为：

{% include 'EMBudgetTrackerBundle::navbar.html.twig' with {'var':'Categories'} %}

Answer 1

这很简单：

将此定义为带有
的单个树枝 {% block menu_block %} //your content here {% endblock %}
在每个页面中使用您的块 {% block menu_block %} {{ parent() }} {% endblock %}
制作条件语句，以便在当前菜单元素中提供您的课程。显然你必须传递给你的树枝（或从请求中检索，即你的页面的名称或ID），以制作你想要做的事情

Answer 2

执行此操作的简便方法是使用路线：

<ul class="nav nav-pills">

<li {% if app.request.attributes.get('_route') == 'your_route' %} class="active" {% endif %}>
<a href="{{ path('your_route') }}">MyTitle</a>
</li>

...
</ul>

这是对@Winzou提供的解决方案的改编。

Answer 3

这是一个example。

{% if menu.url == current_url %} class="active"{% endif %}

如何更改Twig中没有js的活动菜单？

3 个答案: