jqueryhashjquery-bbq

Hashchange addClass not working


I'm currently using the jQuery BBQ hashchange plugin to generate hash changes so that when my content div animates, I have back button functionality. I've found a tutorial, which has given me the functionality I want, but I'm having trouble getting my menu to indicate which hash it is on.

Here's my basic code:

HTML

<ul class="tabNavigation">

  <li>
      <a class="" href="#Contact">
        contact
      </a>
  </li>  

  <li>
      <a class="" href="#Portfolio">
        portfolio
      </a>
  </li>

  <li>
      <a class="" href="#Services">
        services
      </a> 
  </li> 

  <li>
      <a class="" href="#About">
        about
      </a>
  </li>

  <li>
      <a href="#Landing" class="selected">
        home
      </a>
  </li>  

</ul>

jQuery

$(window).bind('hashchange', function () {

  var hash = window.location.hash || '#Landing';
  $(".Content").animate({marginTop: "1500px"}, '500', 
    function(){tabContainers.hide().filter(hash).show(), function(){}}); 
  $(".Content").animate({marginTop: "0px"}, '500');
  $("ul.tabNavigation a").removeClass("selected");
  $("a[hash=" + hash + "]").addClass("selected");
});

CSS

ul.tabNavigation li
{
  position: relative;
  display: inline-block;
  float: right;
  font-family: "Baskerville";
  font-size: 18px;
  list-style-type: none;
  text-align: left;
  margin-top: 0;
}

ul.tabNavigation li a
{
  display: inline-block;
  text-decoration: none;
  color: white;
  margin-right: 5px;
  margin-top: 0;
}

ul.tabNavigation li a:hover
{
  display: inline-block;
  text-decoration: none;
  color: #91A493;
  margin-right: 5px;
}

ul.tabNavigation li a.selected
{
  color: blue;
}

I've set the script up so that upon the page loading "Home" is selected, and it displays blue as it should. Upon clicking a link, the class "selected" is removed as it should, but the line $("a[hash=" + hash + "]").addClass("selected"); doesn't seem to be doing anything, and I cannot for the life of me figure out why. I've pored over the code on the tutorial, see it working, but it doesn't work on my page. I'd really appreciate another set of eyes...I'm sure it's something stupid at this point. Thanks for any help.

EDIT - removed some extraneous information in the markup and CSS.


Solution

  • Finally found the answer! When one is using an example from 2010, one should use the same jQuery library as the example. If I copy the jQuery library from the example and load it instead of the latest version, everything works like a charm. So something in the line $("a[hash=" + hash + "]").addClass("selected"); must not be working in the latest build (or it was deprecated.)