Как сделать активное выделение ссылки?

Question

[blazer05]

Здравствуйте.
Подскажите мне нужно, чтоб при переходе по ссылкам в меню было видно где ты сейчас находишься т.е. ссылка должна быть активной как сейчас на главная. По умолчанию сейчас активная главная т.е. куда бы не перешел главная всегда активна, как сделать, чтоб при переходе на другую ссылку она была активной?

Код

<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

[Степан Крапивин]

в тегах к вопросу указаны только html и css, с помощью этих технологий выделить активную ссылку и определить текущий адрес невозможно.
С другой стороны, судя по примеру кода, используется шаблонизатор django или подобный.
Добавь к вопросу тег djangо.

Есть два варианта выделить ссылку
На бекэнде: при генерации страницы проверять совпадает ли адрес с url в ссылке и если совпадает добавлять класс "active"
примерно так:

<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>

Или на на фронтэнде:
На странице разместить javascritpt-код, который будет определять адрес и добавлять ссылке в меню класс "active"

Comments

[blazer05]

да сайт на джанго. В бекенде метод нужно написать я правильно понял?

[Степан Крапивин]

blazer05, можно написать метод или шаблонный тег.
Путь текущей страницы находится в объекте request.path.
Но лучше всего сделать не на бекенде а на фронте

[antonye]

В шаблоне который отвечает за вывод меню... но я б лучше в контроллере проверял uri страницы, чтобы шаблон не засорять... все зависит от количества пунктов меню конечно

[blazer05]

Ребята спасибо, сделал как Степан подсказал. Сайт не большой, это все меню что есть на картинке, там больше не требуется.