Dynami c inline CSS стиль в шаблоне Django - PullRequest
Новая
       5

Dynami c inline CSS стиль в шаблоне Django

0 голосов
/ 27 апреля 2020

Я новичок в Django и пытаюсь выяснить, как использовать Dynami c CSS, который активен только для текущей категории, в которой находится пользователь.

У меня есть боковая навигация с некоторыми категориями и любой категорией, в которой пользователь включен, должен быть активен с использованием класса.

В настоящее время у меня есть такие вещи: 

{% for category in categories %}
   <li><a href="{% url 'category' category.id %}"
         {% if category.id in request.path %}
             class="uk-text-bold"
         {% endif %} >{{ category.name }}</a></li>
         {% endif %}

Это, очевидно, не правильно и не не работает, поэтому я думаю, что есть правильный способ сделать что-то подобное, и мне просто трудно понять или выяснить это.

Любая помощь приветствуется! Благодаря.

1 Ответ

1 голос
/ 27 апреля 2020

Вы можете создать файл html, например, стиль. html, например, 

{% load static %}
<style>

{% if your_condition %}

.active{
  /*your styles here*/
 }

{% endif %}
</style>

и включить его в свой основной файл html. 

{% for category in categories %}
                                <li><a href="{% url 'category' category.id %}"
                                            class="classname">{{ category.name }}</a> 
                                </li>
                        {% endfor %}

необходимо js обработать добавление и удаление активного класса для вашего элемента. было бы что-то вроде этого 

var categories = document.getElementsByClassName('classname');

for (var i = 0; i < tabs.length; i++) {
   tabs[i].addEventListener("click", function () {
    Array.prototype.forEach.call(document.getElementsByClassName("classname"), 
    function (tab) {
       tab.classList.remove('active');
    });
    this.classList.add('active');
   });
   }

Надеюсь, это поможет вам. Также я предлагаю вам прочитать django пользовательский тег шаблона . с шаблонными тегами вы можете написать динамический тег стиля c для вашего html и вызывать его, когда вам нужно.

...