使用django Javascript将导航栏图标更改为活动状态

我已经用bootstrap4制作了一个导航栏，我想将当前页面的图标切换到活动状态。 目前，我正在使用

<li class="nav-item"><a href="/" id="A"
                      {% if request.path == "/" %}
                        class="nav-link active" 
                      {% else %}
                        class="nav-link"
                      {% endif %}>Home</a></li>
<li class="nav-item"><a href="/blog" id="B"
                     {% if request.path == "/blog/" %}
                     class="nav-link active" {% else %}
                     class="nav-link"
                     {% endif %}>Blog</a></li> 

我想要的是一种更简单的方法，使用url名称来激活脚本 像这样：

{% if request.path == '/' %}
<script>
document.getElementById("#A").classList.add('active');
if ( document.getElementById("#A").classList.contains('active') )
document.getElementById("#A").classList.toggle('active');
</script>

{% elif request.path == '/blog/' %}
<script>
document.getElementById("#B").classList.add('active');
if ( document.getElementById("#B").classList.contains('active') )
document.getElementById("#B").classList.toggle('active');
</script>
{% endif %}

{%if-request.path='/'%}
document.getElementById（“#A”）.classList.add（'active'）；
if（document.getElementById（“#A”）.classList.contains（'active'））
document.getElementById（“#A”）.classList.toggle（'active'）；
{%elif request.path='/blog/'%}
document.getElementById（“#B”）.classList.add（'active'）；
if（document.getElementById（“#B”）.classList.contains（'active'））
document.getElementById（“#B”）.classList.toggle（'active'）；
{%endif%}

有没有更简单的办法？请建议突出显示导航栏上的活动页面图标以切换样式。

---

谢谢

在不违反DRY原则和硬编码URL的情况下，最好的方法是在模板中使用

反向

例如：

<!-- Top of page (below extends and include) -->
{% url 'index' as index %}
{% url 'blog' as blog %}

<!-- ..... Body HTML ..... -->

<li class="nav-item">
    <a href="{{ index }}" id="A" class="nav-link {% if request.path == index %}active{% endif %}">
        Home
    </a>
</li>
<li class="nav-item">
    <a href="{{ blog }}" id="B" class="nav-link {% if request.path == blog %}active{% endif %}">
        Blog
    </a>
</li> 

{%url'index'作为索引%}
{%url“blog”作为blog%}




在不违反DRY原则和硬编码URL的情况下，最好的方法是在模板中使用
反向

例如：

<!-- Top of page (below extends and include) -->
{% url 'index' as index %}
{% url 'blog' as blog %}

<!-- ..... Body HTML ..... -->

<li class="nav-item">
    <a href="{{ index }}" id="A" class="nav-link {% if request.path == index %}active{% endif %}">
        Home
    </a>
</li>
<li class="nav-item">
    <a href="{{ blog }}" id="B" class="nav-link {% if request.path == blog %}active{% endif %}">
        Blog
    </a>
</li> 


{%url'index'作为索引%}
{%url“blog”作为blog%}




您的第一个方法不那么冗长，更具可读性，并启动服务器端—实际上更好。为什么要更改它？您的第一个方法不那么冗长，更具可读性，并启动服务器端-实际上更好。你为什么要改变它？