javascript - jQuery addClass 问题 - 试图通过 ID 查找元素

Question

我有一个链接到页面上 anchor 的菜单。有几个附加页面也可以链接回带有这些 anchor 的主页。

我有一些 jQuery 可以在单击时更改菜单项的颜色。因此，如果我在主页上单击“关于”，它会转到“关于” anchor 并以蓝色突出显示“关于”。如果我从博客页面点击关于，它会转到主页和关于 anchor ，但它不会突出显示菜单项，因为 jQuery 仅由点击事件触发。因此，如果在 URL 中看到 anchor ，我会尝试在页面加载时手动触发突出显示。

HTML 是:

<ul id="navigation">
  <li id="item_0"><a href="#home" class="active">Home</a></li>
  <li id="item_1"><a href="#about">About</a></li>
  <li id="item_2"><a href="#projects">Projects</a></li>
  <li id="item_3"><a href="#locate">Locate</a></li>
  <li id="item_4"><a href="/blog">Blog</a></li>
</ul>

如您所见 - class="active"应用于事件菜单项的 标记。

我正在尝试使用以下 jQuery JS 检查 anchor 标记的页面加载，并突出显示相关标记。

$(document).ready(function(){
    var hash = window.location.hash;

    switch(hash){
        case "#about":
            $('#navigation li a').removeClass("active");
        $('item_1', '#navigation li a').addClass('active');
         break;
    }
});

任何人都可以帮助解决问题吗？

预先感谢您的帮助!

Answer 1

要按 ID 选择，请更改:

$('item_1', '#navigation li a').addClass('active');

对此(因为 ID 必须是唯一的，您不需要更复杂的选择器):

$('#item_1 a').addClass('active');

id-selector^[docs]需要一个 #。