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

【问题标题】：Styling current navigation menu item in Django在 Django 中设置当前导航菜单项的样式
【发布时间】：2015-06-11 18:42:24
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery html django menu

【解决方案1】：

@Liarez 在他的answer 中写道：

在此示例中，我对 3 个 url 进行了区分，如果您有一个类似于 /posts/whatever/contacts 的 URL，这可能会很混乱，因为有 2 个地方会返回 True（第 2 和第 3 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'),

【讨论】：

【解决方案2】：

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

当你这样做时

{{request.path}}

在模板中，它返回您所在的网址（类似于/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 个 url 进行了区分，如果你有一个类似 /posts/whatever/contacts 的 URL，这可能会很混乱，因为有 2 个地方会返回 True（第二个和第三里）

但是，如果您有非常不同的网址，这可能是您尝试做的最简单的方法之一

【讨论】：