使用 jquery、nodejs、express、bootstrap 设置活动类

Question

我有一个快速生成器，node js 应用程序。我正在使用引导程序和玉器，并且在设置导航栏的活动状态时遇到问题。

我一直在尝试使用一些 jquery，但是当我单击导航栏时，活动状态会发生变化，然后很快就会变回（它不是持久的）。有什么想法我在这里想念的吗？谢谢！

这是我的layout.jade

doctype html
html
  head
    title= title
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
    link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css')
  body
    .navbar.navbar-inverse.navbar-static-top(role='navigation')
      .container
        .navbar-header
          button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='/') Home
        .collapse.navbar-collapse
          ul.nav.navbar-nav
            li
              a(href='/about') About
            if user
              li
                a(href='/table') Table
              li
                a(href='/logout') Logout
            else
              li
                a(href='/login') Login
              li
                a(href='/signup') Signup
      block content

      script(src='//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js')
      script(src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js')
      script(type='text/javascript' src='/javascripts/index.js')

这里是/javascripts/index.js

$(".nav a").on("click", function(){
  $(".nav").find(".active").removeClass("active");
  $(this).parent().addClass("active");
});

Answer 1

这实际上可行，您会获得一个页面导航，这会导致页面刷新并且活动类被删除。相反，您可以在 dom 准备好时尝试添加类：

$(function() {

  var page = window.location.pathname;

  $('.nav li').filter(function(){
     return $(this).find('a').attr('href').indexOf(page) !== -1
  }).addClass('active');

  $(".nav a").on("click", function() {
    $(".nav").find(".active").removeClass("active");
    $(this).parent().addClass("active");
  });
});

或没有过滤器，您可以将其替换为：

$('.nav li').find('a[href="'+ page +'"]').addClass('active');

Answer 2

这不是持久的，因为每次单击导航栏项时页面都会重新加载。如果您使用 Ajax 加载页面内容，而不重新加载整个页面，那么 jQuery 方法将是完美的。

在您的情况下，您可以直接使用 Jade 来完成。您可以设置一个包含活动部分的 ID、名称或 slug 的变量（例如 active），然后在模板上运行检查，并相应地分配 active 类：

ul.nav.navbar-nav
    li(class=active == 'about' ? 'active' : '')
        a(href='/about') About