突出显示基于当前视图的菜单项 [英] Highlight menu item based on current view

问题描述

我目前正在每个菜单项上的模板中查看一个变量，看是否应该添加一个CSS类来突出显示它。

  {％if title ==Home％} 
 
 {％else％} 
< li> 
 {％endif％} 
  

我想创建一个包含四个菜单项的列表。为了达到预期的效果，我必须重复上面的代码四次。

 menu：[
 {title：home，link：/}，
 {title：about，link：about}，
 { ：contact，link：contact} 
] 
  

简单的方法来循环访问列表，并突出显示相应的项目？

解决方案

而不是传递任何东西，或试图解析一些URL或列表中，只需创建模板的高亮部分即可。

创建一个包含菜单的基本模板，每个 class =

$ < ul>


< li class ={％block nav_about％} {％endblock％}>关于< / li>
< li class ={％block nav_contact％} {％endblock％}>联络人< / li>
< / ul>


在扩展基本的页面模板中，覆盖其中一个值为active的块。

  {％extendsbase.html％} 
 {％block nav_contact％} active {％endblock％} 
 {％block content％}< h3>联络人< / h3> {％endblock％} 
  

I'm currently checking a variable in the template on each menu item to see if I should add a CSS class to highlight it.

{% if title == "Home" %}
<li class="active">
{% else %}
<li>
{% endif %}

I want to create a list containing four menu items. To get the desired effect I'm going to have to repeat the above code four times.

"menu":[
{"title":"home", "link":"/"}, 
{"title":"about", "link":"about"}, 
{"title":"contact","link":"contact"}
]

Is there a simpler way to cycle through the list and highlighting the appropriate item?

解决方案

Rather than passing anything, or trying to parse some url or list, just make the highlight part of the template.

Create a base template that contains the menu, with a block for each class= property.

<ul>
    <li class="{% block nav_home %}{% endblock %}">Home</li>
    <li class="{% block nav_about %}{% endblock %}">About</li>
    <li class="{% block nav_contact %}{% endblock %}">Contact</li>
</ul>

In the page templates that extend the base, override one of the blocks with the value "active".

{% extends "base.html" %}
{% block nav_contact %}active{% endblock %}
{% block content %}<h3>Contact</h3>{% endblock %}

这篇关于突出显示基于当前视图的菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！