引导导航栏交互式+结构 [英] bootstrap navbar interactive + structure
问题描述
这是我的Fiddle示例此处
this is my Fiddle example here
我有很多看起来像这样的html文件:
i have a lot of html files that look something like this:
<head>
…
</head>
<body>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/49714666/menuforJsFiddle2.js"></script>
…
<script>
//some script stuff
//...
</script>
</body>
我的bootsrap导航栏是从外部文件馈送的.
my bootsrap navbar is being fed from an external file.
因此，在我的小提琴中，当我单击TopMenu-> Hour-> Submenu1时，这3个都将突出显示.由于此代码:
So, in my Fiddle, when I click TopMenu->Hour->Submenu1 all 3 will be hightlighted.because of this code:
$(".dropdown-menu a").click(function() {
$('li').removeClass('active');
$(this).parents('li').addClass("active");
});
而且，因为我在<li><a href="#">subMenu1</a></li>\
但是，在我的真实示例中，我想在此行<li><a href="#">subMenu1</a></li>\中放置类似href="pageName.html"的内容，但这不起作用.我的意思是，这3个(TopMenu-> Hour-> Submenu1)都不会突出显示.就像更改menuforJsFiddle2.js突出显示已单击的内容一样.但随后它仅加载pageName.html并忘记了单击的内容.这是我的理解.
But, in my Real example i want to put something like href="pageName.html" in this line <li><a href="#">subMenu1</a></li>\ but this does not work. what I mean by that is, all 3 (TopMenu->Hour->Submenu1) will not be highlighted. It is like it changes the menuforJsFiddle2.js to highlight what has been clicked. but then it just loads up pageName.html and forgets what has been clicked. this is my understanding.
我试图了解为什么以及如何使它起作用?我处理这个问题的模型可能是完全错误的?
I am trying to understand why and how i can get this to work? I model of tackling this might be completely wrong?
注意:我试图为了更好地实现为multilple * .html文件，所有在顶部相同的导航栏，但在选择菜单中的一个链接，它会显示该网页，菜单栏将显示已选择的此链接.基本结构是这样的:
NOTE:What I am trying to achive is multilple *.html files that all have the same nav bar at the top, but when a link in the menu is selected it will show that page and the menu bar will show this link that was selected. basic structure is something like:
-htmlfiles
-> *.html
-菜单
-> menu.js
-htmlfiles
-->*.html
-menu
-->menu.js
推荐答案
嗯，您的意思是类似于此页面是吗?
Hmm, do you mean something like what this page does?
我只有一个html文件定义了我的导航栏.使用 grunt-bake 将其插入页面.然后，在每个页面的顶部，我都有一些js基本上说找到我所在的页面并突出显示它".
I have a single html file that defines my navbar. It is inserted into pages using grunt-bake. Then at the top of each page I have a little bit of js that basically says "find the page that I'm on and highlight it".
有关更多详细信息，请参见此文件，这几乎就是我的做法设置站点.这是脚本的相关内容:
For more detail take a look at this file, which is almost exactly how I've set up the site. Here's the pertinent bit of script:
<script type="text/javascript">
// We're not using jquery because jquery isn't loaded yet.
document.getElementById('navbar-first').setAttribute('class', 'active');
</script>
这篇关于引导导航栏交互式+结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
