Переключить активная ссылка Bootstrap Navbar

Question

Я прочитал много постов на эту тему, нашел почти всегда такое же решение, но он не работает для меня ...

Моя проблема заключается в следующем: я хочу использовать Twitter Bootstrap 2.3.2 и его навигатор, поэтому я включаю файлы css и js. Как раз перед этим, я также включаю jquery. Затем я приведу пример, приведенный на загрузочном сайте, который отображается очень хорошо. Однако теперь я хочу, чтобы элемент меню был нажат как активный и удалил активный класс из всех остальных. Я видел в файле bootstrap.js, что эта функция встроена, поэтому больше не нужно включать код сценария. Проблема в том, что пункты меню никогда не переключаются на активные. Затем я попытался добавить сценарий jquery, чтобы принудительно удалить все активные классы и добавить активный класс к одному элементу, который был нажат. Ничего не произошло.

Так что, пожалуйста, помогите !! Я пробовал один и тот же код в jsfiddle, и он отлично работает, так же как проблема возникает из нефрита? от экспресс-макета? как это исправить?

Вот код, я использую:

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 - 

Answer 1

Вы можете попробовать что-то вроде, что в вас нефрите расположения:

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 

Answer 2

Здесь решение я нашел (я не имею ссылку больше, жаль владельца кода)

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} 

и я поставил server.js в

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