How to make a link active?

Question

css

Hello.
Tell me, I need it so that when you click on the links in the menu, you can see where you are now, i.e. the link should be active as it is now on the main one. By default, the active main is now. wherever you go, the main one is always active, how to make it active when you go to another link?

The code

<div class="tm-left-inner-container">
            <ul class="nav nav-stacked templatemo-nav">
                <li><a href="/" class="active"><i class="fa fa-home fa-medium"></i>Главная</a></li>
                <li><a href="{% url 'products' %}"><i class="fa fa-shopping-cart fa-medium"></i>Продукция</a></li>
                <li><a href="{% url 'services' %}"><i class="fa fa-send-o fa-medium"></i>Услуги</a></li>
                <li><a href="{% url 'testimonials' %}"><i class="fa fa-comments-o fa-medium"></i>Отзывы</a></li>
                <li><a href="{% url 'about' %}"><i class="fa fa-gears fa-medium"></i>О нас</a></li>
                <li><a href="{% url 'contact' %}"><i class="fa fa-envelope-o fa-medium"></i>Контакты</a></li>
            </ul>
        </div>

Answer 1

the tags to the question contain only html and css, using these technologies it is impossible to highlight the active link and determine the current address.
On the other hand, judging by the code example, the django template engine or similar is used.
Add the django tag to the question.
There are two options to highlight the link
On the backend: when generating the page, check if the address matches the url in the link and if it does, add the "active" class
like this:

<li><a href="/" class="{% if request.path == '/' %}active{% endif %}"><i class="fa fa-home fa-medium"></i>Главная</a></li>
<li><a href="{% url 'products' %}" class="{% if request.path == '/products/' %}active{% endif %}"><i class="fa fa-shopping-cart fa-medium"></i>Продукция</a></li>

Or on the frontend:
On the page, place a javascriptt code that will determine the address and add a link to the menu with the class "active"