javascript - 如何高亮:active element using javascript?

Question

<分区>

Answer 1

这基本上是在 hashChange 事件上执行的 css transition。因此，每当浏览器 url 的 hash 发生变化时，就会触发一个 event。然后你可以执行任何你想执行的操作。

在您的问题中，您想要开始 background-color 的 transition。在我的示例中，我使用两个 css 类和一个 setTimeout 来执行此操作。

我们需要一个类，.transitionStart，在事件开始时立即将背景更改为橙色。在 0.5 秒 的超时 之后(您可以随意更改)，我将类替换为 .transitionEnd , 让 css 将颜色淡化回白色。

就是这样!

您可以将相同的函数绑定(bind)到 window.onload 以在页面加载时立即突出显示该元素。

function highlightHash() {
    var id = document.location.hash.substr(1);
    var element = document.getElementById(id);

    if( element ) {
        element.className = "transitionStart";
  
        setTimeout(function() {
            element.className = "transitionEnd";
        }, 500);
    }
};

window.onhashchange = highlightHash;

// this execute the highlighting on inital load too
window.onload = highlightHash;

.transitionStart {
  background: orange;
}
.transitionEnd {
  -webkit-transition: background-color 1s;
  -moz-transition: background-color 1s;
  transition: background-color 1s;
  background: white;
}

<a href="#one">highlight #one</a> - <a href="#two">highlight #two</a>
<br /><br />

<div id="one">#one</div>
<div id="two">#two</div>