Question

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

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

<div></div>

如何根据当前的href自定义div元素？使用＆＃34; id＆＃34;和＆＃34;目标＆＃34;我只能为两个hrefs做这个。例如：在第一页上，元素为红色，在第二页上，它变为绿色，在第三页上，它变为蓝色。这可能吗？

Answer 1

是的，这是可能的。如果您收听onhashchange事件，则可以更改DOM以符合您的要求。

这是一个有效的例子：

＆＃13;

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;
  }
}

＆＃13;

#bar {
  width: 100vw;
  height: 10vh;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

＆＃13;

<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>

<div id="bar"></div>

＆＃13;

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

1 个答案: