在导航栏中设置活动类，但 JQuery 不起作用答案

【问题标题】：Set active class in nav bar with JQuery not working在导航栏中设置活动类，但 JQuery 不起作用
【发布时间】：2018-01-31 10:50:43
【问题描述】：

我的导航栏中有以下元素。

<div class="nav-languages">
      <a class="navbar-brand active" id="langStyle" href="/language/it"> ITA </a>
      <a class="navbar-brand" id="langStyle" href="/language/en"> ENG </a>
</div>

单击a 链接后，我需要将“活动”类添加到单击的元素中，并将“活动”类删除给其他元素。我的 jQuery 如下：

  $('.nav-languages a').click(function() {
      $('.nav-languages a').removeClass('active');
      $(this).addClass('active');
  });

现在，点击后不久，被点击的元素正确地改变颜色变为活动状态，而另一个变为非活动状态。但是一旦页面结束加载，情况就会恢复到以前的状态。

我已经阅读了很多类似问题的答案，但没有人帮助我解决我的问题..

请注意，我是 jQuery 和 js 的新手。

感谢您提供的任何帮助。

编辑：我正在使用 Django-Python

urls.py:

urlpatterns = [
    url(r'^$', webprojects_home, name="homepage"),
    url(r'^language/(?P<language>[a-z\-]+)/$', language),
    ]

和

views.py：

### setting language session
def language(request, language='it'):
    response = HttpResponse("setting language to %s" % language)
    response.set_cookie('lang', language)
    request.session['lang'] = language
    return HttpResponseRedirect(request.META.get('HTTP_REFERER'))

【问题讨论】：

您的 jQuery 每次都会在您的页面加载时加载，所以基本上 .click 函数将永远不会运行。您必须在 html 部分应用一些逻辑来检查哪个链接应该有 active 类。
当您更改页面时，您的导航栏将恢复到默认状态，因此您需要在每个页面设置哪个元素处于活动状态。如果您没有更改页面，那么您会看到您正在寻找的更改，但如果不实际加载您单击的页面，它就没有多大用处。
@Mr.Developer 您可能从其他地方来到该站点，并且活动链接不正确，或者当您单击后退/前进时，它不会改变。抱歉，这是一个非常不靠谱的建议。
您已经在页面中硬编码了活动类，因此无论您转到哪个页面，它始终是具有该类名称的同一个链接。
我认为您只需要重新考虑问题，您就会找到一个简单的解决方案。祝你好运:)

标签： javascript jquery python html

【解决方案1】：

我通过简单地读取当前 Django 会话语言并使用此信息手动将活动类设置为正确的链接来解决了没有 jQuery 的问题。

 {% if session_language == 'it' %}
  <a class="navbar-brand active" href="/language/it"> ITA </a>
  <a class="navbar-brand" href="/language/en"> ENG </a>
  {%else%}
  <a class="navbar-brand" href="/language/it"> ITA </a>
  <a class="navbar-brand active" href="/language/en"> ENG </a>
  {%endif%}

不是很优雅，但简单有效:-)

感谢大家的支持！

【讨论】：

【解决方案2】：

简单... jquery 代码将是：

$('.nav-languages a').click(function(){
    $(this).addClass("active")
    $(this).siblings("a").removeClass("active")
});

希望这会有所帮助....

【讨论】：

问题中的代码是正确的 - 这是不正确的预期结果。请注意，当有人单击锚标记（链接）时，它会更改页面，因此您使用 jQuery 所做的所有 DOM 更改会立即丢失。