Hashchange addClass 不起作用答案

【问题标题】：Hashchange addClass not workingHashchange addClass 不起作用
【发布时间】：2017-02-14 00:51:35
【问题描述】：

我目前正在使用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;
}

我已经设置了脚本，以便在页面加载时选择“主页”，并且它应该显示为蓝色。单击链接后，“已选择”类将按原样删除，但 $("a[hash=" + hash + "]").addClass("selected"); 行似乎什么也没做，我终其一生都无法弄清楚原因。我仔细研究了教程上的代码，看到它工作，但它在我的页面上不起作用。我真的很感激另一双眼睛……我敢肯定在这一点上这是愚蠢的。感谢您的帮助。

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

【问题讨论】：

你能更准确地说出什么不起作用吗？烧烤是否显示出一些工作上的成功？后退按钮功能有问题吗？也许 JS Fiddle 会有所帮助。
嘿！我开始制作 JS Fiddle，但我不确定是否可以包含 BBQ 插件？也许我可以……不确定。烧烤正在工作。问题似乎是脚本中的最后一行，这就是菜单指示应该如何出现。上一行是删除类就好了。我也尝试过 $("ul.tabNavigation a").filter(hash).addClass("selected"); 之类的东西，但这也不起作用。我的变量“哈希”似乎有一些问题，无法正确链接到 HTML 中的锚标记。
哦，是的，没有小提琴。检查hash 是否正确接收值？
是的。如果我运行'alert(hash)'，它会在每次运行该代码时弹出，并且具有正确的值。我想得越多，似乎jQuery很好，问题出在HTML的某个地方，但我看不到它。当我查看example code 时，似乎我一切正常，但他的工作正常，而我的却没有。
我能想到的就是你应该用示例页面覆盖你的工作，然后逐步修改回到你想要的结果。我称之为“折射”。

标签： jquery hash jquery-bbq

【解决方案1】：

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

【讨论】：