Hashchange addClass不起作用

时间:2013-07-13 14:47:25

标签: jquery hash jquery-bbq

我目前正在使用jQuery BBQ hashchange plugin生成哈希更改,以便在我的内容div动画时,我有后退按钮功能。我找到了一个tutorial,它给了我我想要的功能,但是我无法通过菜单来指示它所在的哈希值。

这是我的基本代码:

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

我已经设置了脚本,以便在页面加载“Home”时,它会显示蓝色。单击链接后,“selected”类将被删除,但行$(“a [hash =”+ hash +“]”)。addClass(“selected”);似乎没有做任何事情,我不能为我的生活找出原因。我仔细阅读了教程中的代码,看到它有效,但它在我的页面上不起作用。我真的很感激另一双眼睛......我确信这一点上是愚蠢的。谢谢你的帮助。

编辑 - 删除了标记和CSS中的一些无关信息。

1 个答案:

答案 0 :(得分:1)

终于找到了答案!当使用2010年的示例时,应该使用与示例相同的jQuery库。如果我从示例中复制jQuery库并加载它而不是最新版本,那么一切都像魅力一样。因此,$("a[hash=" + hash + "]").addClass("selected");行中的某些内容不得在最新版本中使用(或者已弃用。)