Question

我目前正在Django的个人博客上工作，以便更好地进行网络编程，但我遇到了一个小问题。我的想法是让网页能够知道哪个菜单元素是活动的，从views.py传递参数并传递给模板。因此，我在这里问为什么会这样。

这是我的模板：

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Image2Food - 
Sag mir, was ich daraus kochen kann - Index
</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
</head>
<body>
<div id="nav">
<?php
require("nav.php")
?>
</div>
<div id="content">
<h1>Image2Food - Sag mir, was ich daraus kochen kann</h1>
<h2>Das soziale, multimediale Netzwerk für Kochideen</h2>

这是我的views.py（针对具体页面）：

{% block menu %}

        <style> li a:nth-child({{ active }}) { text-decoration: underline; } </style>

    <li><div id="title"><span>{</span> <a href="#">Title</a> <span>}</span></div></li>
    <li><a href="/">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Work</a></li>

{% endblock menu %}

我已经尝试过针对李的第n个孩子，但这也不起作用。我也尝试将固定数字作为第n个孩子的参数。唉，无济于事。

任何人都可以帮助我吗？有没有更好的方法来做到这一点？

Answer 1

这里有几个问题：nth-child查找组中的第n个子元素。您当前的代码会在n代码中设置a li元素的样式 - 但每个a中只有一个li }。您需要定位li：

li:nth-child({{ active }}) a { text-decoration: underline; }

您还需要确保li项目旁边没有其他内容（包括style标记），因为这会搞砸柜台。您上面发布的模板代码不完整（我们无法看到外部的ul / ol），但如果其中有其他元素则会出现问题。

尽管如此，我并不认为这是最好的方法 - 动态内联样式不是一个强大的，可维护的解决方案。一个更常见的模式是将active类添加到活动列表项，然后在核心（静态）CSS中为此设置样式。有关如何实现这一点的一些想法，请参阅this question。

li a：来自Django的变量的nth-child无法按预期工作

1 个答案: