引导导航栏交互+结构答案

【问题标题】：bootstrap navbar interactive + structure引导导航栏交互+结构
【发布时间】：2014-05-22 22:38:39
【问题描述】：

这是我的小提琴示例here

我有很多看起来像这样的 html 文件：

<head>
…
</head>
<body>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/49714666/menuforJsFiddle2.js"></script>
…
<script>
//some script stuff 
//...
</script>

</body>

我的 bootsrap 导航栏是从外部文件获取的。

所以，在我的小提琴中，当我点击 TopMenu->Hour->Submenu1 时，所有 3 都将被突出显示。因为这段代码：

$(".dropdown-menu a").click(function() {
    $('li').removeClass('active');
    $(this).parents('li').addClass("active");
});

而且，因为我在这一行中有href="#" <li><a href="#">subMenu1</a></li>\

但是，在我的真实示例中，我想在 <li><a href="#">subMenu1</a></li>\ 这一行中添加类似 href="pageName.html" 的内容，但这不起作用。我的意思是，所有 3 (TopMenu->Hour->Submenu1) 都不会突出显示。就像它更改了menuforJsFiddle2.js 以突出显示已单击的内容。但随后它只会加载pageName.html 并忘记点击了什么。这是我的理解。

我想了解为什么以及如何让它发挥作用？我解决这个问题的模型可能是完全错误的？

note ：我试图achive是多次* .html文件，顶部所有的导航栏都有相同的导航条，但选择菜单中的链接时，它将显示该页面和菜单栏将显示已选择的此链接。基本结构是这样的：

-html文件
-->*.html
-菜单
-->menu.js

【问题讨论】：

标签： jquery twitter-bootstrap navbar

【解决方案1】：

嗯，你的意思是像this page 所做的那样吗？

我有一个定义我的导航栏的html 文件。它使用grunt-bake 插入到页面中。然后在每个页面的顶部我有一点 js，基本上说“找到我所在的页面并突出显示它”。

有关更多详细信息，请查看this file，这几乎就是我设置网站的方式。这是脚本的相关部分：

<script type="text/javascript">
  // We're not using jquery because jquery isn't loaded yet.
  document.getElementById('navbar-first').setAttribute('class', 'active');
</script>

【讨论】：