javascript - 突出显示锚的目标元素中的元素？

Question

我目前正在使用以下内容来尝试突出显示位于锚点的目标元素内的元素（div.box）（例如，section#help）。锚点用于滚动到#help，但我只需要突出显示#help 中的div.box。

$(document).ready(function() {

$(".box").removeClass("highlightTarget");
var myLocation = document.location.hash.replace("#","");
if (myLocation) {
    document.getElementById(myLocation).className = "highlightTarget";
}

$("a").click(function () {
    $(".box").removeClass("highlightTarget");
    var clickedLink = this.href.split("#");
    if (clickedLink.length > 1) {
        document.getElementById(clickedLink[1]).className = "highlightTarget";
    }
});

});

与css一起：

.highlightTarget {background:red}

目前，我的代码将 section#help 的背景更改为红色。我究竟做错了什么？

非常感谢任何帮助。

Answer 1

你要的是.box目标元素内的元素，所以你需要在目标元素内使用.find()来查找.box元素。

$("a").click(function () {
    $(".box").removeClass("highlightTarget");
    var clickedLink = this.href.split("#");
    if (clickedLink.length > 1) {
        $('#' + clickedLink[1]).find('.box').addClass("highlightTarget")
    }
});

Answer 2

$(".box").removeClass("highlightTarget");
var myLocation = document.location.hash.replace("#","");
if (myLocation) {
    document.getElementById(myLocation).className = "highlightTarget";
}

$("a").click(function () {
    $(".box").removeClass("highlightTarget");
    var clickedLink = this.href.split("#");
    if (clickedLink.length > 1) {
        $('#' + clickedLink[1]).find('.box').addClass('highlightTarget');
    }
});