在我的 index.html 中,我有 3 个用作 anchor 的链接。我还有一个固定位置的 div 元素。
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<div></div>
如何根据当前href自定义div元素?使用“id”和“target”,我可以只对两个 href 执行此操作。例如:在第一页上元素是红色的,在第二页上它变成绿色,在第三页上它变成蓝色。这可能吗?
最佳答案
是的,这是可能的。如果您收听 onhashchange
事件,您就可以更改 DOM 以满足您的要求。
这是一个工作示例:
window.onhashchange = function() {
var el = document.getElementById('bar');
switch (window.location.hash) {
case '#1':
el.className = 'red';
break;
case '#2':
el.className = 'green';
break;
case '#3':
el.className = 'blue';
break;
}
}
#bar {
width: 100vw;
height: 10vh;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<div id="bar"></div>
关于html - 基于当前 anchor 的元素的不同样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47623882/