关于锚点定位跳转后如何给DIV添加高亮提示

[飞龙逍遥]

如图，有这么一个问题，我有一个导航栏，里面有若干个li组成，分别对应下方若干DIV。锚点已经完成，点击可以跳转，现在想要添加：我点击导航栏里的按钮，对应跳转到相应DIV时，DIV有个border边框高亮闪烁，几秒后消失恢复原样。请教大神们，如果可以请直接上源码，谢谢！

[飞龙逍遥]

引用 4 楼 jio可 的回复:

<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<style>
  div {
    border: 2px #ccc solid;
  }
.active {
  border-color: red;
}
</style>
<script>
var arr = document.querySelectorAll('a')
var timr = null
for(let i = 0; i< arr.length; i++) {
  arr[i].onclick = function() {
    var id = this.href.split('#')[1]
    var el = document.getElementById(`div${id}`)
    el.className += 'active'
    timr && clearTimeout(timr)
    timr = setTimeout(() => {
      el.className = el.className.replace('active', '')
    }, 500)
  }
}
</script>

报错了，大佬

[jio可]

你不是运行的上面的代码吧，要看本地的div id是什么，上面的示例id是div1 div2 div3，用这个去匹配肯定找不到dom

[jio可]

用锚点的id和id做一个映射就可以了，比如#4的时候id等于4的div添加样式

[飞龙逍遥]

引用 1 楼 jio可 的回复:

用锚点的id和id做一个映射就可以了，比如#4的时候id等于4的div添加样式

大佬，萌新小白理解能力有限，能麻烦您写一下代码吗，谢谢了！

[jio可]

<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<style>
  div {
    border: 2px #ccc solid;
  }
.active {
  border-color: red;
}
</style>
<script>
var arr = document.querySelectorAll('a')
var timr = null
for(let i = 0; i< arr.length; i++) {
  arr[i].onclick = function() {
    var id = this.href.split('#')[1]
    var el = document.getElementById(`div${id}`)
    el.className += 'active'
    timr && clearTimeout(timr)
    timr = setTimeout(() => {
      el.className = el.className.replace('active', '')
    }, 500)
  }
}
</script>