我有一个团队成员的页面,我需要添加类到基于URL中的当前哈希部分。原因是启用链接到特定的团队成员,因为他们没有单独的页面。
因此,当有人输入URL https://www.mypage/members#anchorX
时,open
类将添加到div
之后的元素中,ID为anchorX
。
$(window).on('hashchange', function(e) {
e.preventDefault();
let hash = window.location.hash.substr(1);
$('div[id^="' + hash + '"]').next().addClass('open');
});
.open {
color: red;
opacity: 1
}
<a href="#anchorX">Bla</a>
<a href="#anchorY">Bli</a>
<a href="#anchorZ">Blu</a>
<div id="anchorX">Anchor 1</div>
<div>this should be red 1</div>
<div id="anchorY">Anchor 2</div>
<div>this should be red 2</div>
<div id="anchorZ">Anchor 3</div>
<div>this should be red 3</div>
上面的JS代码工作正常,但只有当哈希值改变时-所以当有人已经在https://www.mypage/members
页面上,然后将转到https://www.mypage/members#anchorX
时,它才能工作。
但我需要它主要是当有人得到一个带有哈希值的URL并直接指向https://www.mypage/members#anchorX
时才能工作。但在这种情况下什么也没发生。据我所知,这是因为在第二种情况下没有"哈希值更改",但我该如何让它工作呢?不同的窗口事件?还是触发某种重载?
https://jsfiddle.net/beatajak/de18hwxf/9/-上面的代码
1条答案
按热度按时间z9smfwbn1#
只需在加载时调用它,而不需要preventDEfault