Node.js 切换活动链接引导导航栏

我已经读了很多关于这个主题的帖子，发现几乎都是相同的解决方案，但它对我不起作用

我的问题如下：我想使用twitterbootstrap2.3.2和它的导航栏，所以我包括css和js文件。在此之前，我还包括jquery。然后我举了一个在bootstrap站点上给出的例子，它显示得非常好。但是，我现在想将单击的菜单项设置为活动，并从所有其他类中删除活动类。我在bootstrap.js文件中看到这个函数是内置的，因此没有更多的脚本代码要包含。问题是菜单项从不切换为活动。然后，我尝试添加jquery脚本来强制删除所有活动类，并将活动类添加到单击的项目中。什么也没发生

所以请帮帮我！！我在jsfiddle中尝试了相同的代码，效果很好，那么问题是否来自jade？从快速布局？如何修复它

以下是我使用的代码：

server.js

var express = require('express');
var app = express();
var port = 3000;

app.set('view engine', 'jade');
app.set('view options', {layout: true});
app.set('views', __dirname + '/views');

app.configure(function () {
    this.use(express.cookieParser());
    this.use(express.session({ secret: 'shhhhhhhhh' }));
    this.use(express.static(__dirname + '/public'));
    this.use(app.router);
});

app.get('/', function (req, res) {
    res.render('index')
    });
});

app.get('/about', function (req, res) {
    res.render('about')
    });
});

app.listen(port, function () {
  console.log('listening in http://localhost:' + port);
});

/views/layout.jade

!!! 5
html
   head
    title Test Application
    link(type='text/css', rel='stylesheet', href='/css/site.css')
    link(rel='stylesheet', href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css')
    script(src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
    script(src='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js');

body
    div.navbar.navbar-inverse.navbar-fixed-top
       div.navbar-inner
         div.container
            button.btn.btn-navbar(type='button', data-toggle='collapse', data-   target='.nav-collapse')
               span.icon-bar
               span.icon-bar
               span.icon-bar
            a.brand(href='#') Login Test Application
            div.nav-collapse.collapse
              ul.nav
                li.active 
                  a(href='#') Home
                li 
                  a(href='#about') About
                li 
                  a(href='#Contact') Contact
     div.container             
        block content

extends layout

block content
   div.span6.offset3
      h1 Test Application
   div.span12
      h2 Test application!
      p This is a test application      
      button.btn.btn-success(type='button', onclick='')') Login

extends layout

block content
   div.span6.offset3
      h1 - About -

/views/index.jade

!!! 5
html
   head
    title Test Application
    link(type='text/css', rel='stylesheet', href='/css/site.css')
    link(rel='stylesheet', href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css')
    script(src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
    script(src='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js');

body
    div.navbar.navbar-inverse.navbar-fixed-top
       div.navbar-inner
         div.container
            button.btn.btn-navbar(type='button', data-toggle='collapse', data-   target='.nav-collapse')
               span.icon-bar
               span.icon-bar
               span.icon-bar
            a.brand(href='#') Login Test Application
            div.nav-collapse.collapse
              ul.nav
                li.active 
                  a(href='#') Home
                li 
                  a(href='#about') About
                li 
                  a(href='#Contact') Contact
     div.container             
        block content

extends layout

block content
   div.span6.offset3
      h1 Test Application
   div.span12
      h2 Test application!
      p This is a test application      
      button.btn.btn-success(type='button', onclick='')') Login

extends layout

block content
   div.span6.offset3
      h1 - About -

/views/about.jade

!!! 5
html
   head
    title Test Application
    link(type='text/css', rel='stylesheet', href='/css/site.css')
    link(rel='stylesheet', href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css')
    script(src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
    script(src='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js');

body
    div.navbar.navbar-inverse.navbar-fixed-top
       div.navbar-inner
         div.container
            button.btn.btn-navbar(type='button', data-toggle='collapse', data-   target='.nav-collapse')
               span.icon-bar
               span.icon-bar
               span.icon-bar
            a.brand(href='#') Login Test Application
            div.nav-collapse.collapse
              ul.nav
                li.active 
                  a(href='#') Home
                li 
                  a(href='#about') About
                li 
                  a(href='#Contact') Contact
     div.container             
        block content

extends layout

block content
   div.span6.offset3
      h1 Test Application
   div.span12
      h2 Test application!
      p This is a test application      
      button.btn.btn-success(type='button', onclick='')') Login

extends layout

block content
   div.span6.offset3
      h1 - About -

---

您可以尝试在您的jade布局中使用类似的内容：

li(class=title=='Home'?'active':undefined)
  a(href="/") Home
li(class=title=='About'?'active':undefined)
  a(href="/about") About
li(class=title=='Contact'?'active':undefined)
  a(href="/contact") Contact

然后将其添加到server.js：

app.get('/', function (req, res) {
  res.render('index', title: 'Home')
});

app.get('/about', function (req, res) {
  res.render('about', title: 'About')
});

这样，您还可以删除版面中的硬编码标题，并通过此解决方案对其进行修改，如下所示：

title #{title} | Test Application

它将把这个作为你家的标题：

Home | Test Application

---

这里是我找到的解决方案（我没有链接了，对不起代码所有者）

我将server.js设置为

app.get('/about', function (req, res) {
    res.render("about", {
        title: 'About', 
        id: 'about',
        user: JSON.stringify(req.user, 0, 2)
    });
});

---

如果您尝试过，请发布不起作用的代码。此外，这与express/jade/node无关。谢谢brnrd。事实上，我刚刚在Github上找到了一个非常类似的解决方案（但我不记得是谁提出的…）。我会在那之后马上发布。有了新的jade/pug标准，你不必把变量放在引号里。因此，代码如下所示：

a（href=key）#{val}

。此外，“if”和“each”不需要前面的连字符