基于当前锚点的元素的不同样式

Question

在我的 index.html 中，我有 3 个用作锚点的链接。我还有一个固定位置的 div 元素。

<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>

<div></div>

如何根据当前 href 自定义 div 元素？使用 "id" 和 "target" 我只能对两个 href 执行此操作。例如：在第一页上元素是红色的，在第二页上它变成绿色，在第三页上它变成蓝色。这可能吗？

Answer 1

是的，这是可能的。如果您收听 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>

基于当前锚点的元素的不同样式

Different styles for an element based on the current anchor

html

css

anchor

href

target