Question

我有一个菜单链接到页面上的锚点。还有一些其他页面也可以通过这些锚点链接回主页。

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

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”应用于＆lt;一个＆GT;活动菜单项的标记。

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

$(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]需要#。

Answer 2

此选择器错误：$('item_1', '#navigation li a')。正在做的是在item_1选择器中查找#navigation li a元素（不存在）（将选择锚标记）。

试试这个。您也不需要任何杂乱的switch陈述

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

    $('#navigation li a').removeClass("active");
    $('#navigation li a[href=" + hash + "').addClass("active");
});

如果没有点击锚点，您可能想要处理基本案例。

Answer 3

您只需模拟鼠标点击，以避免重复突出显示代码：

var hash = window.location.hash;
if(hash) {
    $("a[href='" + window.location.hash + "']").click();
}

jQuery addClass问题 - 尝试按ID查找元素

3 个答案: