Question

我有一个时间来确定如何实现这一目标 - 我很惊讶它不是整个网络中更常见的事情，尽管我离题了。

我正在构建一个小网站，我试图将其保留在一个页面上 - 最终该网站将存在于USB上，因此事情应尽可能独立（文件方式）。目前我有一个垂直导航菜单（即第1页，第2页，第3页），当您从菜单中选择一个链接时，会出现该部分的新内容。我已经把这部分了 - 或多或少 - 感谢改进的Coda-Slider脚本（见这里：http://codysilfies.com/orn/）。

我无法弄清楚的部分是，除了在点击菜单项时更改内容外，我还想更改背景。所以Menu_Item_1将显示BGImage1.jpg，Menu_Item_2 - BGImage2.jpg等。很像这样的东西：http://brewfestgb.com/#!/merriment - 尽管该页面上还有一些额外的功能......我无法弄清楚如何削减它们。必须有一种更简单的方法来做到这一点。

有大量的“点击单个链接来更改图片”教程 - 但没有多个链接。我也尝试使用相同的滑块代码作为背景 - 但我无法使图像调整大小到浏览器窗口的大小并使滑块工作（它显然需要一个设置宽度 - 这对于内容位是可行的，但不是当我希望背景调整浏览器时）。

任何建议......还是潜在客户？在我看来，有人应该知道一些事情。提前谢谢！

Answer 1

您可以在触发点击处理程序时更改背景图像：

$('a.link').click(function(){
   // Find the image value
   var background = 'BGImage' + $(this).data('bg') + '.jpg';

   // Change CSS background-image
   $('body').css('background-image',background);
});

您的链接必须如下所示：

<a href="path/to/link1" class="link" data-bg="1">Link 1</a>
<a href="path/to/link2" class="link" data-bg="2">Link 2</a>
<a href="path/to/link3" class="link" data-bg="3">Link 3</a>

在单个网页上淡化/更改背景

1 个答案: