我已经阅读了很多关于这个主题的帖子,发现几乎总是相同的解决方案,但它对我不起作用......
我的问题如下:我想使用 Twitter Bootstrap 2.3.2 及其导航栏,所以我包含了 css 和 js 文件。就在此之前,我还包括 jquery。然后我举了一个在引导站点上给出的例子,它显示得很好。但是,我现在想将单击的菜单项设置为活动并从所有其他人中删除活动类。我在 bootstrap.js 文件中看到该函数是内置的,因此无需包含更多脚本代码。问题是菜单项永远不会切换到活动状态。然后我尝试添加一个 jquery 脚本来强制删除所有活动类并将活动类添加到单击的一项。没啥事儿。
所以请帮忙!!我在 jsfiddle 中尝试了相同的代码,它工作正常,那么问题是否来自玉?从快递布局?如何解决?
这是我使用的代码:
服务器.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 -