根据当前文件更改HTML元素的类

Question

我使用Django和HTML文件，我试图根据当前文件更改一个元素的类。

所以，我有这个base.html文件，它是某种＆＃34;超类＆＃34;文件，我的大多数其他.html扩展，感谢Django，使用{% extends 'base.html' %}

除此之外，在该文件中，我在顶部有一个导航栏，所有文件都必须有。此导航栏具有各种元素，其中一个元素是当前活动元素。例如，在＆＃34; foo.html＆＃34;页面，我希望导航栏元素持有＆＃39; foo＆＃39;标签以红色下划线。我有一个.css类，我只需输入class =＆＃34; active＆＃34;我很高兴。

但是我在base.html。我不能。如果我这样做，那对每个孩子来说都很活跃。

是否有解决方案或我是SOL？

要清楚，我希望foo.html以某种方式告诉base.html＆＃34;这个div＆＃34;应该是活动的，而其他文件会以不同的方式告诉base.html。

另外，我想要一些干净的解决方案，这是一个持久的项目，我宁愿不从任何黑客入手。我知道我可以在我的所有文件中复制导航栏，并在每个单独的文件上设置正确的按钮以激活，但这不是最佳选择。

以下是我使用的代码：

{% extends 'base.html' %}

{% load static %}

{% block content %}

 <!-- #### -->
        <!-- Menu -->
        <!-- #### -->
        <div id="nav-content">
            <nav>
                <div class="row">
                    <div class="col s12">
                        <!-- ############ -->
                        <!-- Desktop Menu -->
                        <!-- ############ -->
                        <div class="nav-wrapper">
                            <a href="home" class="brand-logo">
                                <img src="{% static 'notifications/img/logo.png' %}"/>
                                <span class="valign">
                                    <b class="main-text">NotifyMe</b> - Hello World :)
                                </span>
                            </a>

                            <!-- Desktop -->
                            <ul class="right hide-on-med-and-down">

Should be class="active" here
                                <li><a href="manage_feeds">Feeds</a></li>
                                <li><a href="profile">Profile</a></li>
                                <li><a href="logout">Logout</a></li>

                            </ul>

                            <!-- Mobile -->
                            <a href="#" data-activates="mobile-demo" class="button-collapse">
                                <i class="material-icons">menu</i>
                            </a>
                        </div>


                        <!-- ########### -->
                        <!-- Mobile Menu -->
                        <!-- ########### -->
                        <ul class="side-nav" id="mobile-demo">
                            <li class="logo">
                                <img src="{% static 'notifications/img/logo.png' %}"/>
                                <p>
                                    <b class="main-text">Aero</b> Admin
                                </p>
                            </li>

                            <li>
                                <a class="waves-effect" href="manage_feeds">Feeds</a>
                                <a class="waves-effect" href="profile">Profile</a>
                                <a class="waves-effect" href="logout">Logout</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </nav>
        </div>

        {% block innerContent %}

        {% endblock %}

{% endblock %}