JQuery Event-Handler modifies CSS class with one-click shift

Question

I have weird behavior using jQuery Click-Function. I also tried this with on-EventHandler. There is some simple markup from Twitter Bootstrap Navbar, and I'm trying to change the li-tag CSS class. In this case, I want to remove the active CSS class and add it to the current li-tag. But the change is applied with a one-click shift. Therefore, when, for example, “Preview” is the current visually active element, and I click on “Document”, the CSS class does not seem to change. When I click “Slidecast”, then the visual active element is “Document”, which is not the expected behavior. Next Click "Preview", and now "Slidecast" is a visual active element. What am I doing wrong? I tried it with delete and add, as well as with toggleClass, but that doesn't matter. Here is my code and markup. JS wrapped in Dom-Ready-Function.

<div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="active"><a href="#!document_defaultview">Document</a></li> <li><a href="#!document_slidecast">Slidecast</a></li> <li><a href="#!document_preview">Preview</a></li> <li><a href="#!document_notes">Notes</a></li> <li><a href="#!document_questions">Questions</a></li> <li><a href="#!document_activities">Activities</a></li> </ul> </div> </div> 

Js

 $("#document_navbar a").on('click', function(e) { // Hide all content, display the one related to hash-tag $(".document_view").toggle(false); $(app_locationToId($(this).attr("href"))).toggle(true); // Here is the part that does not work: //$("#document_navbar li.active").removeClass("active"); //$("a[href='" + window.location.hash + "']").parent().addClass('active'); // Another try ... same result as described above! $("#document_navbar li.active").toggleClass("active", false); $("a[href='" + window.location.hash + "']").parent().toggleClass("active", true); }); 

OK, according to your answers, here is the code I used to solve this problem:

 $("#document_navbar a").on('click', function(e) { new_location = app_locationToId($(this).attr("href")); // Hide all content, display the one related to hash-tag $(".document_view").toggle(false); $(new_location).toggle(true); // Change visual active li-tag $("#document_navbar li.active").toggleClass("active", false); $("a[href='" + app_IdToLocation(new_location) + "']").parent().toggleClass("active", true); }); 

Answer 1

You can handle the hashchange event in a window object to add your “active” class:

 $(".navbar li a").on('click', function(e) { // Hide all content, display the one related to hash-tag $(".document_view").toggle(false); $('.navbar li').removeClass("active", false); }); $(window).on('hashchange', function() { $("a[href='" + window.location.hash + "']").parent().addClass("active", true); }); 

jsfiddle

Answer 2

When the click function is activated, window.location.hash is one of the actual page. Therefore, you must be sure that the hash changes, and then grab it and switch the class.

Finding a piece of code on my materials and editing / publishing it for you in the near future. :)

Edit:

So here you are, this is a snippet of one of my old projects before I started using the history.js class:

 $(function () { "use strict"; var hashListener = null, hashValue = '', hashQuery; function checkIfHashChanged() { var hashQuery = window.location.hash; if (hashQuery === hashValue) { return; } hashValue = hashQuery; //Do the toggle $("#document_navbar li.active").toggleClass("active", false); $("a[href='" + hashQuery + "']").parent().toggleClass("active", true); } function startHashListener() { setInterval(checkIfHashChanged, 100); } function stopHashListener() { if (hashListener !== null) { clearInterval(hashListener); } hashListener = null; } startHashListener(); }); 

This code runs outside of your click function and just listens for the hash exchange during the hash list interval.

Answer 3

My best guess is that window.location.hash will be updated after the click handler is executed. As a result, you always get the “old” location in the click handler. After that, the location will be updated, but you will not use it until the next click ... so you will always be at the touch of a button.

To test this, I would put a short delay on the class switch:

 $("#document_navbar a").on('click', function(e) { // Hide all content, display the one related to hash-tag $(".document_view").toggle(false); $(app_locationToId($(this).attr("href"))).toggle(true); setTimeout(function() { $("#document_navbar li.active").toggleClass("active", false); $("a[href='" + window.location.hash + "']").parent().toggleClass("active", true); }, 1000); });