Przeczytałem wiele postów na ten temat, znalazłem prawie zawsze to samo rozwiązanie, ale to nie działa dla mnie ...

Mój problem jest następujący: chcę użyć Twitter Bootstrap 2.3.2 i jego paska nawigacyjnego, więc dołączam pliki css i js. Tuż przed tym dołączam także jquery. Następnie biorę przykład podany na stronie bootstrap, która wyświetla się bardzo dobrze. Jednak teraz chcę ustawić kliknięcie elementu menu jako aktywny i usunąć aktywną klasę ze wszystkich innych. Widziałem w pliku bootstrap.js, że ta funkcja jest wbudowana, więc nie ma więcej kodu skryptu do uwzględnienia. Problem polega na tym, że elementy menu nigdy nie przełączają się na aktywne. Następnie próbowałem dodać skrypt jquery, aby wymusić usunięcie wszystkich aktywnych klas i dodać aktywną klasę do jednego klikniętego elementu. Nic się nie stało.

Więc proszę, pomóż! Próbowałem tego samego kodu w jsfiddle i działa dobrze, więc czy problem pochodzi z jade? z ekspresowego układu? jak to naprawić ?

Oto kod, którego używam:

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

/views/index.jade

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

/views/about.jade

extends layout

block content
   div.span6.offset3
      h1 - About -