使用 jquery 更改不同锚点 link 的背景

Question

我需要根据 link 锚点更改 div 背景。我使用一个单页样式的网站，它在滚动时更改页面锚 link，因此当我滚动到不同的锚 link 时，我需要更改 div "bg" 背景。例如：

<div class="bg" style="background-image:url(http://example.com/about.png)

如果link是http://example.com/#portfolio
然后

<div class="bg" style="background-image:url(http://example.com/portfolio.png)

如果link是http://example.com/#skills
然后

<div class="bg" style="background-image:url(http://example.com/skills.png)

我知道我可以使用 css，但我需要使用 jquery。我需要根据 link 锚点而不是通过单击元素来更改背景，因为当我滚动到页面时，锚点 link 正在改变。

Answer 1

注意我已更改为 hashchange load 以触发两个事件

http://jsfiddle.net/mplungjan/85regbvt/

$(window).on('hashchange load', function(e) {
  let hash = location.hash? location.hash.substring(1) : “home”;
  let URL = "http://example.com/" + hash + ".png";
  $(".bg").css({
    "background-image": "url("+URL+")"
  })
});

对于与散列不匹配的变量图像名称：

const images = { "home":"images/default.png","about":"images/about.png","portfolio":"images/folio.gif"...};
$(window).on('hashchange load', function(e) {
  let hash = location.hash? location.hash.substring(1) : "home";
  $(".bg").css({
    "background-image": "url("+images[hash]+")"
  })
});

使用 jquery 更改不同锚点 link 的背景

Change background on different anchor link using jquery

anchor

jquery

scroll

background-image