更改与#anchor 匹配的链接的CSS答案

【问题标题】：Change Css of link that matches #anchor更改与#anchor 匹配的链接的CSS
【发布时间】：2021-08-17 00:35:37
【问题描述】：

如果右侧边栏中的链接与当前页面 url 中的#anchor 匹配，我希望它改变颜色。

示例> 如果这是 URL：https://help.thinkiq.com/documentation/visualization-and-analysis-tools/custom-content/extensions-xy-scatter-with-timeshift#solution

然后“ON THIS PAGE”侧边栏模块中的“Solution”链接应变为绿色。

我试过了，但它不起作用：

document.querySelectorAll('a[href="'+document.URL+'"]').forE‌ach(function(elem){e‌lem.className += ' current-link')});

这在我的 custom.css 中

.current-link {
color: green;

}

【问题讨论】：

标签： javascript joomla

【解决方案1】：

我刚刚通过编写以下 CSS 和 JS 更改在您的实时网站上成功运行了此解决方案：

CSS：

.current-link {
    color: green !important;
}

document.querySelector('.sp-module ul>li>a[data-heading="' + window.location.hash.substr(1) + '"]').classList.add('current-link');

实际上，您只需要：

从 url 访问哈希值
将哈希值构建到您的 js 选择器中
将所需的类添加到找到的元素中

您需要确保您的自定义样式覆盖其他预先存在的样式。 !important 为我完成了这项工作，但也许可以更好地在您的 css 中指定目标元素。

要在列表中的每个链接上添加一个事件侦听器，以便在每次锚点单击时更改绿色样式，choose from a range of js and jquery techniques/styles。我正在使用带有轻微延迟的普通 js 方法，以确保在更新 url 后触发操作。在您的实时网站上进行测试时，该事件似乎在 URL 更新之前立即触发。

document.querySelectorAll('.sp-module ul>li>a[data-heading]').forEach(function(elem) {
    elem.addEventListener("click", function() {
        setTimeout(function(){
            document.querySelectorAll('.sp-module ul>li>a[data-heading]').forEach(function(e) {
                e.classList.toggle("current-link", e.dataset.heading == window.location.hash.substr(1));
            });
        }, 100); // 1/10 of a second
    });
});

上面在页面加载时为每个锚元素添加了一个监听器。单击任何锚点时，将迭代所有锚点，并在适当的地方有条件地应用样式。

另一种技术（实际上可能更快——尽管我认为这在这种情况下并不重要）是无条件地删除所有锚元素上的 current-link 类，然后只将该类重新添加到新的合适的锚。

【讨论】：

我已将您的 JS 添加到头部并确保有一个 !important。但它不起作用。
嗯，它在浏览器中对我有用，所以我只能假设这是一个时间问题。确保在页面完全加载后执行 javascript。
我让它部分工作。但是在第一次点击变成绿色后，它需要重新加载页面才能将下一次点击的链接变为绿色。
我现在不在电脑前。我认为您要求在页面加载时触发该行为，并且当哈希值更改或单击您的锚链接之一时，您需要一个 eventListener 或 mutationObserver 来执行相同的操作。这是对您最初问题的新要求。看看你现在可以自己实现什么。告诉我你的进展情况。
我很困惑 .classList.add('current-link') 是否是 addEventListener 的函数。对不起，我还在学习...

【解决方案2】：

尝试使用e‌lem.classList.add('current-link')

console.log(document.URL)
document.querySelectorAll(`a[href="${document.URL}"]`)
  .forEach(elem => elem.classList.add('current-link'));

.current-link {
  color: green
}

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="https://stacksnippets.net/js">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="#">Link 7</a>

【讨论】：