如何为当前列表组添加“活动"类? [英] How do I add `active` class for my current list group?

问题描述

这是我当前列表组的一个示例:

This is a sample of my current list-group:

由于侧边栏上的 Python流控制链接处于活动状态，我希望通过添加CSS active 类来突出显示该链接.

Since Python Flow Control link on side bar is active, I want it to be highlighted by adding a CSS active class.

我想我可以使用页面的当前URL来做到这一点，在 Python Flow Control 页面中，当前URL看起来像 http://localhost:8000/python/python-flow-control/，在模板中，如果我键入 {{request.path}} ，它将返回/python/python-flow-control/.

I think I can do that using current URL of the page, being in Python Flow Control page the current URL looks like http://localhost:8000/python/python-flow-control/ and in template if I type {{ request.path }} it would return /python/python-flow-control/.

我使用URL尝试了这种方法，但是没有用:

Using URL I tried this approach but it didn't work:

<div class="list-group">
{% for sub_cat in sub_cats %}
    <a href="{% url 'tutorials:tutorials' sub_cat.sub_cat_parent.cat_slug sub_cat.sub_cat_slug %}" class="list-group-item list-group-item-action {% if request.path == '/{{sub_cat.sub_cat_parent.cat_slug}}/{{sub_cat.sub_cat_slug}}/' %} active {% endif %}">
    {{ sub_cat.sub_cat_title }}</a>
{% endfor %}
</div>

我添加了 {％if request.path =='/{{sub_cat.sub_cat_parent.cat_slug}}/{{sub_cat.sub_cat_slug}}/'％}有效的{％endif％} 检查当前URL是否与当前单击的链接的URL相匹配，以及是否与添加CSS active 类相符.

I added {% if request.path == '/{{sub_cat.sub_cat_parent.cat_slug}}/{{sub_cat.sub_cat_slug}}/' %} active {% endif %} to check if the current URL matches with url of the current clicked link and if it matches add css active class.

但是，这没有效果.它没有引发任何错误，也没有任何作用.

However, this had no effect. It didn't throw any error and didn't work either.

我试过了，也没用

{% url '{{request.path}}' category='python' sub_cat='python-introduction' as target %}

{% if target %}
    <div class="bg-secondary">active</div>
{% endif %}

推荐答案

我添加了{％if request.path =='/{{sub_cat.sub_cat_parent.cat_slug}}/{{sub_cat.sub_cat_slug}}/'％}有效的{％endif％}，以检查当前网址是否与当前单击链接的url，如果匹配则添加css active class.但是，这没有效果.它没有引发任何错误，也没有任何作用.

I added {% if request.path == '/{{sub_cat.sub_cat_parent.cat_slug}}/{{sub_cat.sub_cat_slug}}/' %} active {% endif %} to check if the current URL matches with url of the current clicked link and if it matches add css active class. However, this had no effect. It didn't throw any error and didn't work either.

当然不能，请参考我对您(几乎重复的)其他问题的回答.

Of course not, cf my answer to your (almost duplicate) other question.

我试过了，也没用

edit: I tried this, it didn't work either

{％url'{{request.path}}''category ='python'sub_cat ='python-introduction'作为目标％}

{% url '{{request.path}}' category='python' sub_cat='python-introduction' as target %}

{％，如果目标是％}

{% if target %}

当然不是.首先，因为 {％url％} 的第一个参数是URL的名称，而不是 request.path -您应该知道，因为它已经在您的原始代码段中了:

Of course not. First because the first argument to {% url %} is the url's name, not request.path - which you should know since it's already in your original snippet:

<a href="{% url 'tutorials:tutorials' sub_cat.sub_cat_parent.cat_slug sub_cat.sub_cat_slug %}" class="list-group-item list-group-item-action">

，然后是因为 {％if target％} 仅测试 target 的布尔值.

and then because {% if target %} only tests the boolean value of target.

最简单的简单答案是:

<div class="list-group">
{% for sub_cat in sub_cats %}
    {% url 'tutorials:tutorials' sub_cat.sub_cat_parent.cat_slug sub_cat.sub_cat_slug as sub_cat_url %}
    <a href="{{ sub_cat_url }}" class="list-group-item list-group-item-action {% if request.path==sub_cat_url %} active {% endif %}">
    {{ sub_cat.sub_cat_title }}</a>
{% endfor %}
</div>

这篇关于如何为当前列表组添加“活动"类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！