0

我花了很长时间弄清楚如何实现这一点——我很惊讶这在整个网络上并不常见，尽管我离题了。

我正在构建一个小型站点，我试图将其保留在一个页面上 - 最后该站点将存在于 USB 上，因此事情应该尽可能独立（文件明智）。目前我有一个垂直导航菜单（即第 1 页、第 2 页、第 3 页），当您从菜单中选择一个链接时，该部分的新内容就会出现。多亏了修改后的 Coda-Slider 脚本（参见此处：http ://codysilfies.com/orn/ ），我已经完成了这部分。

我想不通的部分是，除了在单击菜单项时更改内容之外，我还想更改背景。因此 Menu_Item_1 将显示 BGImage1.jpg、Menu_Item_2 - BGImage2.jpg 等等。很像这样的东西：http ://brewfestgb.com/#!/merriment - 虽然该页面上有很多附加功能......我真的不知道如何削减。必须有一种更简单的方法来做到这一点。

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

有什么建议……或线索吗？在我看来，有人应该知道一些事情。提前致谢！

4

1 回答 1

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>
于 2012-04-04T01:47:43.700 回答