更改匹配 #anchor 的 link 的 Css

Question

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

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

然后 link“在此页面上”侧边栏模块中的“解决方案”应该变为绿色。

我试过了，但没用：

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

这在我的 custom.css

.current-link {
color: green;

}

Answer 1

尝试使用 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>

Answer 2

我只是运行通过编写以下 CSS 和 JS 更改在您的实时站点上成功地解决了这个问题：

CSS:

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

JS

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

有效，您只需要：

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

您需要确保您的自定义样式覆盖其他预先存在的样式。 !important 为我完成了这项工作，但也许可以在 css.

中更好地指定目标元素

要在列表中的每个链接上添加一个事件侦听器，以便在每次单击锚点时更改绿色样式，。我使用的是一种略有延迟的普通 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 class，然后仅将 class 重新添加到新的适当锚点。

更改匹配 #anchor 的 link 的 Css

Change Css of link that matches #anchor

javascript

joomla