在css中突出显示当前打开的类别选项卡的链接答案

【问题标题】：Highlighting link of currently opened category tab in css在css中突出显示当前打开的类别选项卡的链接
【发布时间】：2012-02-24 08:44:16
【问题描述】：

我正在尝试突出显示当前打开的类别选项卡的链接，这是我已经完成的：

globs.py

def globs(request):
    cats = Category.objects.all()
    return {'cats': cats}

views.py

def news_by_category(request, slug):
    c = Category.objects.get(slug=slug)
    news = News.objects.filter(category=c, status='p').order_by('-id')
    #news = c.news_set.all().order_by('-id')
    return object_list(
        request,
        news,
        paginate_by = 5,
        extra_context = {'c':c},
        template_name = 'news_by_category.html')

base.html #bodyclass

<body class="{% block bodyclass %}{% endblock %}">

news_by_category.html

{% block bodyclass %}{{c|cut:" "}}{% endblock %}

base.html

<li><h4>Categories:</h4></li>
{% for i in cats %}
<li class="{{i.name|safe|cut:" "}}_li"> 
    <a href="myurl">{{ i.name }}</a>
</li> {% endfor %}

我现在需要做的是为每个类别创建样式，在类别列表中，我可以通过在 html 文件中设置样式来轻松实现这一点，但我不确定这是否合适（会吗？）。我想出了一些 CSS 样式，

{% for i in cats %}
body.{{ i|safe|cut:" "}} li.{{i|safe|cut:" "}}_li {
    color: red;
}

但是由于我不能在我的 .css 文件中使用 django 模板标签，所以这不起作用。

我的问题： 1）我怎样才能让这个css文件为我工作。有没有一步一步的机会？

2) 如果我在第 1 步失败了，那么在 html 文件中设置这几个 li 元素的样式会有多不妥？

编辑：/尝试另一种方式

我尝试使用： base.html

{% for i in cats %}
<li class="{% ifequal 'request.get_full_path' '/k/{{ i.slug }}/' %}active{% endifequal %}">                 
<a href="#######">{{ i.name }}</a>
</li> {% endfor %}

.css

.active {{color:red;}

当我比较 {{ request.get_full_path }} 和 /k/{{i.slug}}/ 时都返回相同的东西......但如果它在 ifequal 里面似乎不起作用。

【问题讨论】：

标签： python css django highlight django-templates

【解决方案1】：

您可以创建一个名为“active”的简单类或类似的名称，并将其添加到当前选项卡。然后，在您的 CSS 中，您将活动样式应用于该类。因此，您只需附加活动类，它就会自动采用活动样式。

【讨论】：

您能详细说明一下吗？我不确定这如何工作，因为类别列表不是静态的。
好吧，它是否是动态的并不重要。您正在当前活动的链接上设置课程。例如，如果用户单击一个选项卡使其处于活动状态，您可以获取类属性的值，附加活动类名称并更新活动选项卡的类属性。您也可以使用 jQuery 的 toggleClass 方法在客户端执行此操作。这种方法的问题是，如果在单击选项卡时页面刷新，则需要设置 cookie 并存储活动选项卡的标识信息。
我查看了一些与这个主题相关的博客，现在我知道你的意思了。我添加了 .active {color: red} 类，然后我尝试使用“if”模板标签将它附加到 li's ，但我失败了，你能检查一下我在我的问题中附加的代码并帮助我更多吗？
你是如何添加类名的？我对 Django 和 python 真的不太了解，但如果你展示这段代码，也许我们可以弄清楚。
我发现了一个可行的方法... {% ifequal request.get_full_path|cut:"/k/"|cut:"/" i.slug %}active{% endifequal %}跨度>

【解决方案2】：

如果你有一个网址：

{% url app:home i.slug as home %}

<li {% ifequal request.get_full_path home %}class="active"{% endifequal %}>

【讨论】：