切换活动链接Bootstrap导航栏 [英] 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...
我的问题如下:我想使用Twitter Bootstrap 2.3.2及其导航栏,因此我包括css和js文件.在此之前,我还包括了jquery.然后,我以引导站点上显示的示例为例,该示例显示得很好.但是,我现在想将单击的菜单项设置为活动,并从所有其他菜单中删除活动的类.我在bootstrap.js文件中看到此函数是内置的,因此不再需要包含任何脚本代码.问题在于菜单项永远不会切换到活动状态.然后,我尝试添加一个jquery脚本以强制删除所有活动类,并将活动类添加到所单击的一项.什么都没发生.
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.
所以请帮忙!我在jsfiddle中尝试了相同的代码,但效果很好,所以问题出自jade吗?从快递布局?如何解决?
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 ?
这是我使用的代码:
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 -
推荐答案
您可以在翡翠布局中尝试类似的方法:
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
然后将其添加到您的server.js中:
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
这篇关于切换活动链接Bootstrap导航栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!