@blazer05

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

Здравствуйте.
Подскажите мне нужно, чтоб при переходе по ссылкам в меню было видно где ты сейчас находишься т.е. ссылка должна быть активной как сейчас на главная. По умолчанию сейчас активная главная т.е. куда бы не перешел главная всегда активна, как сделать, чтоб при переходе на другую ссылку она была активной?
5aa21b4691b19520392015.png
Код
<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>
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
xevin
@xevin
django dealer, vuejs pusher
в тегах к вопросу указаны только 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"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
Sveak Барнаул
от 40 000 руб.