bootstrap barra de navegación interactiva + estructura

this is my Fiddle example aquí

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="#" en esta linea <li><a href="#">subMenu1</a></li>\

But, in my Real example i want to put something like href="pageName.html" en esta linea <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?

NOTA: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
-menú
-->menu.js

preguntado el 22 de mayo de 14 a las 23:05

1 Respuestas

Hmm, do you mean something like what esta página ¿hace?

Yo tengo un 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 este archivo, 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>

respondido 17 nov., 14:20

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.