如何根据我所在的页面将按钮标记为活动？答案

【问题标题】：How can I mark button as active based on the page I am at?如何根据我所在的页面将按钮标记为活动？
【发布时间】：2019-06-21 01:52:53
【问题描述】：

当用户单击选项卡时，我希望该选项卡以蓝色显示为活动状态。我可以使用我在代码中显示的 if 语句来做到这一点，但我会重复代码很多，所以必须有另一种方法，有人可以帮我吗？

当前 if 语句显示激活的个人资料页面

<!-- This is saying: inherit everything from __base.html -->
{% extends "storePage/partials/__base.html" %}
<!-- Main base template which contains header and footer too -->
{% load crispy_forms_tags %}
<!-- To beautify the form at signup -->
{% block body %}

<div class="container bootstrap snippet">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group ">
                <label class="card-header">Personal Settings</label>
                {% if request.get_full_path == "/settings/profile/" %}
                    <a href="{% url 'profile-settings' %}" class="list-group-item list-group-item-action active"><span class="fa fa-user"></span> Profile</a>
                {% endif %}

                <a href="{% url 'account-settings' %}" class="list-group-item list-group-item-action"><span class="fa fa-cog"></span> Account</a>
                <a href="{% url 'emails-settings' %}" class="list-group-item list-group-item-action"><i class="fas fa-envelope"></i> Emails</a>
                <a href="{% url 'billing-settings' %}" class="list-group-item list-group-item-action"><span class="fa fa-credit-card"></span> Billing</a>
            </div>
        </div>
        <!-- Center-right navBar-->
        <div class="col-md-9">
            {% block settingsPageInfo %} {% endblock %} <!-- Here goes the user information on the profile page -->
        </div>
    </div>
</div>




{% endblock %}

这是截图：

[]

我该怎么做才能让我在进入帐户时显示为蓝色？

谢谢大家

【问题讨论】：

不确定这将如何在 python 或任何类似的代码中工作，但一般方法是创建自定义事件处理程序（在本例中为单击事件）并将其应用于每个选项卡。然后只需使用关键字this 向元素添加/删除css 类即可。
哦，所以可以用 JavaScript 在一个新文件中完成，该文件由约定 eventHandler 调用？这可以在 python 中的那个 html 上完成，但它不会很整洁
在 javascript 中类似于element.addEventListener('click', function(e){ element.classList.add("active"); otherTabElement.classList.remove("active"); });。
这与后端（django）无关，这将在前端使用javascript（或jQuery）完成。
而且，就像@Ahtisham 所说，使用 jQuery 会大大简化它，因为您可以通过类名同时“对话”多个元素：$(".tabClass").removeClass("active");。它将从所有选项卡中删除它，而不必单独定位每个选项卡（或使用循环）。

标签： javascript python html django jinja2

【解决方案1】：

尝试将您的请求 URL 名称与您当前的 URL 匹配，您可以像这样添加活动类或直接添加到标签中。

<ul>
  <li class="{% if 'profile' in request.resolver_match.url_name %} active {% endif %}">
    <a href="#">Profile</a>
  </li>
</ul>

这应该可以解决您的问题：

<div class="container bootstrap snippet">
    <div class="row">
    <div class="col-md-3">
        <div class="list-group ">
            <label class="card-header">Personal Settings</label>
            {% if request.get_full_path == "/settings/profile/" %}
                <a href="{% url 'profile-settings' %}" class="list-group-item list-group-item-action {% if 'profile' in request.resolver_match.url_name %} active {% endif %}"><span class="fa fa-user"></span> Profile</a>
            {% endif %}

            <a href="{% url 'account-settings' %}" class="list-group-item list-group-item-action {% if 'account' in request.resolver_match.url_name %} active {% endif %}"><span class="fa fa-cog"></span> Account</a>
            <a href="{% url 'emails-settings' %}" class="list-group-item list-group-item-action {% if 'emails' in request.resolver_match.url_name %} active {% endif %}"><i class="fas fa-envelope"></i> Emails</a>
            <a href="{% url 'billing-settings' %}" class="list-group-item list-group-item-action {% if 'billing' in request.resolver_match.url_name %} active {% endif %}"><span class="fa fa-credit-card"></span> Billing</a>
        </div>
    </div>
    <!-- Center-right navBar-->
    <div class="col-md-9">
        {% block settingsPageInfo %} {% endblock %} <!-- Here goes the user information on the profile page -->
    </div>
</div>

【讨论】：

这看起来很有趣，谢谢。明天起床我试试看

【解决方案2】：

创建一个像这样的通用组件

<angular-anchor-tag [url]="link1"></angular-anchor-tag>

角锚标签.html

<div>
 <a href="url" class="link" (click)="highlightFunction($event)">
<div>

angular-anchor-tag.ts

 @Input url; 
    highlightFunction(event){

    //remove all the highlight classes from links
    .$("link").removeClass("highlight");

    add highlight class to the events target
    event.target.addClass('highlight');

    }

【讨论】：