我已经阅读了很多有关这个主题的帖子,几乎总是找到相同的解决方案,但对我不起作用...
我的问题如下:我想使用Twitter Bootstrap 2.3.2及其导航栏,因此我包含了css和js文件。就在那之前,我也包括了jquery。然后我采取了Bootstrap网站上给出的一个非常好的示例。但是,现在我想把菜单项设置为活动状态并从所有其他菜单项中删除活动类。我在bootstrap.js文件中看到这个函数是内置的,所以不需要再包含脚本代码。问题是菜单项从未切换到活动状态。然后我尝试添加一个jquery脚本来强制删除所有活动类,并将活动类添加到被点击的项目上。但什么都没发生。
所以,请帮忙!!我在jsfiddle中尝试了相同的代码,它运行得很好,那么问题来自jade吗?来自Express布局?应该如何解决?
这是我使用的代码:
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 -