Question

我需要根据链接锚点更改div背景。我使用一个单页样式的网站，在滚动时更改页面锚点链接，所以当我滚动到不同的锚点链接时，我需要更改div“bg”背景。例如：

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

如果链接是http://example.com/#portfolio
那么

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

如果链接是http://example.com/#skills
那么

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

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

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更改不同锚链接的背景

1 个答案: