Question

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

e.g。

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或{{1}实现url中有一个锚引用，并将背景颜色转换为该容器的发光颜色，并将其转换为该颜色。

有人有任何例子吗？

Answer 1

这实际上非常简单。只需通过JsonConvert.DefaultSettings = () => new JsonSerializerSettings { DateParseHandling = DateParseHandling.None, DateTimeZoneHandling = DateTimeZoneHandling.RoundtripKind };读取哈希值（如果需要，删除井号）。通过id或class找到相关项目。然后你可以设置背景颜色的动画（我用jQuery UI做了）。 You can also change color via CSS 3 pretty easily

＆＃13;

location.hash

＆＃13;

$(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();
});

＆＃13;

Answer 2

这是一个纯粹的JS / CSS实现。为了使用JSFiddle，我手动设置window.location.hash，但你会以完全相同的方式获取它。

window.location.hash = "foo";

function highlight() {
  let id = window.location.hash.substr(1);
  let node = document.getElementById(id);
  if (node) {
    node.classList.add('flash');
  }
}
highlight();

您只是阅读哈希并查找页面上的元素是否具有该ID。 substr是剪切哈希的#out。然后，您将该类添加到具有CSS动画的元素。在这种情况下，将背景更改为红色，然后再更改为原始颜色。

.flash {
  animation-name: redflash;
  animation-duration: 5s;
}

@keyframes redflash {
  from {
    background-color: #FF0000;
  }
  to {
    background-color: inherit;
  }
}

这是一个小提琴，展示了它的实际效果：https://jsfiddle.net/904tsLah/11/

这里有一个小提琴，包括如何使用这个想法在页面中导航的实现。 https://jsfiddle.net/904tsLah/18/

当存在锚点时，触发背景颜色的JS / Jquery过渡

2 个答案: