如何突出：使用javascript的活动元素？

Question

当您单击stackoverflow上的帖子时，它将直接转到特定的线程并跳转到页面的正确位置。我明白了。

但如何突出显示部分呢？你知道整个div变成淡橙色并淡出颜色。如何为特定的帖子着色并淡出颜色？ 这里我附上了截图

Answer 1

这基本上是在css transition事件上执行的hashChange。因此，只要浏览器网址的hash发生变化，就会触发event。然后你可以执行你想要的任何事情。

在您的问题中，您想要transition的{​​{1}}。在我的示例中，我使用了两个background-color类和一个css来执行此操作。

我们需要一个班级setTimeout，以便在活动开始时立即将.transitionStart更改为background。在orange timeout之后（您可以根据需要更改），我将该类替换为0.5s，让css将颜色淡化为白色。< / p>

就是这样！

您可以将同一个函数绑定到.transitionEnd，以便在一个页面加载时立即突出显示该元素。

＆＃13;

＆＃13;

window.onload

＆＃13;

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;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要使用window.location.hash获取URL哈希，并且查找元素id等于哈希值。然后将您的CSS或类添加到所选元素。

window.location.hash = "second"; // you can use `first` or `third`
$(document).ready(function(){
    $(window.location.hash).addClass("active");
});

.active {
    background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>

在上面的示例中，如果您将window.location.hash更改为其他ID，则相关元素会突出显示。