javascript - 当存在 anchor 时触发背景颜色的 JS/Jquery 转换

Question

当您通过 a 标记直接链接到答案之一时，如何实现您在堆栈溢出时看到的背景颜色更改类型？

例如

• https://stackoverflow.com/questions/821321/what-does-the-utmscr-or-utmcct-values-mean-in-reference-to-the-http-cookie-serve/#1401813

注意末尾的#1401813是答案ID。

导航到那里将触发容器的背景颜色发光一秒钟，然后返回。

我在容器上设置了 id，并且链接工作正常，页面跳转到适当的区域，但我不确定如何使用纯 js 或 jquery 来实现 url 中存在 anchor 引用，并将背景颜色转换为该容器的发光颜色或从该容器的发光颜色中转换出来。

谁有例子吗？

Answer 1

这实际上很简单。只需通过 location.hash 读取哈希值(如果需要，请删除井号)。通过 id 或 class 找到相关项目。然后你可以设置背景颜色的动画(我用 jQuery UI 做到的)。 You can also change color via CSS 3 pretty easily .

$(document).ready(() => {
  $(window).bind('hashchange', function() {
    updateUrl();
  });
  
  function updateUrl(){
    $('.currentUrl').text(location);
    var selector = "." + location.hash.substr(1);
    $(selector)
      .css("backgroundColor","#aa0000")
      .css("color", "#fff")
      .animate({
          backgroundColor: "#fff",
          color: "#000",
        }, 1000 );
  }
  
  updateUrl();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="currentUrl"></div>
<a href="#asdfg">asdfg</a>
<a href="#qwert">qwert</a>
<a href="#zxcvb">zxcvb</a>
<div class="asdfg">Div with class asdfg</div>
<div class="qwert">Div with class qwert</div>
<div class="zxcvb">Div with class zxcvb</div>