bootstrap navbar interactive + structure

问题

this is my Fiddle example here

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>

my bootsrap navbar is being fed from an external file.

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");
});

And, because i have href="#" in this line <li><a href="#">subMenu1</a></li>\

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?

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
-->menu.js

回答1:

Hmm, do you mean something like what this page does?

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>

来源：https://stackoverflow.com/questions/23818206/bootstrap-navbar-interactive-structure

标签

jquery

twitter-bootstrap

navbar