在 Django 中设置当前导航菜单项的样式

Question

我想在 Django 中设置当前活动子菜单项的样式。我想知道我应该怎么做？我可以想到两种方法：

Django 端：我将当前地址与 link 进行比较，然后在 Django 模板中添加
jQuery 方面：Django 模板对活动菜单项一无所知，我使用 jQuery

我更倾向于jQuery的方式，但是我的思维方式好吗？不知何故不推荐此解决方案吗？

Answer 1

为了在菜单和子菜单中显示活动选项卡，我在模板中使用 request.path 和一个名为 active[=26] 的 class =].

当你这样做时

{{request.path}}

在模板中，它 return 是您所在的 url（类似于 /posts/1234）。因此，在您的 HTML 中，您可以执行以下操作：

<ul id="menu"> <li class="{% if request.path == '/' %}active{% endif %}">Home</li> <li class="{% if 'posts' in request.path %}active{% endif %}">Posts</li> <li class="{% if 'contact' in request.path %}active{% endif %}">Contact</li> </ul>

在这个例子中我做了 3 urls 的差异，如果你有一个类似于 /posts/whatever/contacts[=28= 的 URL，这可能会很混乱] 因为有 2 个地方 return 正确（第二和第三里）

但是，如果您的 url 非常不同，这可能是完成您想要做的事情的最简单方法之一

Answer 2

@Liarez 在他的中写道：

In this example I make difference for 3 urls, this can be messy if you have an URL that is like /posts/whatever/contacts because there is 2 places that will return True (2nd and 3rd li)

所以这里是处理这个问题的更好选择：

{% with request.resolver_match.url_name as url_name %}
    <ul id="menu">
        <li class="{% if url_name == 'home' %}active{% endif %}">Home</li>
        <li class="{% if url_name == 'blog' %}active{% endif %}">Posts</li>
        <li class="{% if url_name == 'contact' %}active{% endif %}">Contact</li>
    </ul>
{% endwith %}

现在我们的 url 路径中没有重复问题。这将起作用，假设您已经使用如下名称编写了 url 模式：

url(r'^$', 'home_view', name=u'home'),
url(r'^posts/$', 'posts_view', name=u'blog'),
url(r'^contact/$', 'contact_view', name=u'contact'),

在 Django 中设置当前导航菜单项的样式

Styling current navigation menu item in Django

html

javascript

django

jquery

menu