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

【问题标题】：jQuery addClass/removeClass while loading page using jinja template使用 jinja 模板加载页面时的 jQuery addClass/removeClass
【发布时间】：2016-12-03 09:19:25
【问题描述】：

我正在尝试制作一个导航栏，以便当前活动的<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 %}

我不太确定我在这里缺少什么。

请提出建议。

【问题讨论】：

标签： jquery html css flask jinja2

【解决方案1】：

当您单击链接时，目标页面会加载到您的浏览器中。所以你不会看到你的 Javascript 代码的任何效果。

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

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

您需要设置每个按钮的 id 才能使其工作。

【讨论】：