Django 模板中的动态内联 CSS 样式答案

【问题标题】：Dynamic inline CSS styling in Django templateDjango 模板中的动态内联 CSS 样式
【发布时间】：2020-08-11 01:21:23
【问题描述】：

我是 Django 新手，正在尝试弄清楚如何使用仅对用户所在的当前类别有效的动态 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 %}

这显然是不正确的，也不起作用，所以我想有一种适当的方法来做这样的事情，我只是很难理解或发现这一点。

感谢任何帮助！谢谢。

【问题讨论】：

相信你能找到答案here

标签： css django django-templates

【解决方案1】：

您可以制作一个 html 文件，例如style.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 custom template tag .with 模板标签你可以为你的 html 编写一个动态样式标签，并在需要时调用它。

【讨论】：

太棒了，这很有帮助！谢谢@Amir。我会调查的。