Toggle active link Bootstrap navbar

问题

I've read a lot of posts on the subject, found almost always the same solution but it does not work for me...

My problem is as follows : I want to use Twitter Bootstrap 2.3.2 and its navbar, so I include the css and js files. Just before that, I also include jquery. I then take an example given on the bootstrap site which display very well. However, I now want to set the menu item clicked as active and remove the active class from all others. I saw in the bootstrap.js file that this function is built in, so no more script code to include. The problem is that the menu items do never toggle to active. I then tried to add a jquery script to force removing all active classes and add the active class to the one item that was clicked. Nothing happened.

So please, help !! I tried the same code in jsfiddle and it works fine, so does the problem comes from jade ? from express layout ? how to fix it ?

Here is the code I use :

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 -

回答1:

You can try with something like that in you jade layout :

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

Then just add this to your server.js :

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

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

This way, you can also remove the hard coded title in your layout and modify it through this solution as :

title #{title} | Test Application

And it will render this as a title for your home :

Home | Test Application

回答2:

Here the solution I've found (I dont have the link anymore, sorry for the code owner)

ul.nav
    -var obj = { 'home':'Home', 'about':'About', 'contact':'Contact' }
    -each val, key in obj
         -if (id == key)
             li.active
               a(href='#{key}') #{val}
         -else            
             li
               a(href='#{key}') #{val}

and I set the server.js as

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

来源：https://stackoverflow.com/questions/18188732/toggle-active-link-bootstrap-navbar