Question

我正在尝试制作导航栏，以便当前有效的<li>标记以不同的背景颜色突出显示。

在导航栏上点击其他选项后，<li>标记现在将突出显示，而不是之前的标记。

在.css文件中：

.active {
    background-color: lightblue;
}

我的.js代码：

$(".topnav li").on('click', function() {
    $(".topnav li").removeClass("active");
    $(this).addClass("active");
});

对于页面布局，我创建了一个名为“comfylayout.html”的jinja模板，

<title>
    {% block title %} {% endblock %}
</title>
<body>
        {% block body %} {% endblock %}
            <ol class='topnav'>
                <li><a href="{{url_for('decorators')}}">Decorators</a></li>
                <li><a href='#'>Turtle</a></li>
                <li><a href='#'>Tkinter</a></li>
                <li><a href='#'>Python regex</a></li>
            </ol>
</body>

它适用于最后3个<li>标签，我没有加载任何页面，但是当我点击第一个链接时，active类被添加，并且一旦被快速删除页面加载。

加载页面的内容如下 -

{% extends "comfylayout.html" %}
{% block title %}
    Decorators
{% endblock %}
{% block body %} ABC {% endblock %}

我不太清楚我在这里缺少什么。

请建议。

Answer 1

单击链接后，目标页面将在浏览器中加载。所以你不会看到你的Javascript代码的任何影响。

对于我的模板，我使用以下方法：在每个页面的开头插入一个小脚本，将当前按钮设置为活动状态：

  $(document).ready(function() {
    $('#decoratorBtn').addClass('active');
  })

您需要设置每个按钮的ID才能生效。

使用jinja模板加载页面时jQuery addClass / removeClass

1 个答案: