1

我现在有点卡住了，我基本上在 DOM 中有我的标题元素，并且我有一个在 CSS 中为索引页面硬编码的背景图像。

我想做的是让这张图片在不同的页面上发生变化。我认为这将是一件非常简单的事情。

$('header').css("background-image","url(assets/img/consulting.png)")

我意识到没有事件触发器，但我的印象是我实际上不需要这样做。

此外，我的 CSS 文件和我要添加 jQuery 的页面的文件与 img 文件夹一样位于不同的文件夹中......我不确定我应该如何在 jQuery 代码中调用 url。是否应该像从 CSS 文件或 HTML 文件导航一样？

谢谢大家，对不起，如果我在这里错过了一些非常明显的东西。

4

2 回答 2

2

这是我将采取的方法，只是从 jQuery 中删除大部分 css，尽管您可能只是想要一个单击事件。

我会为每一页做这个。

<body class="home">
<body class="about">
<body class="contact">

然后在你的 CSS 中做

.home header { background-image: url(../assets/img/consulting.png"; }
.about header { background-image: url(../assets/img/consulting2.png"; }
.contact header { background-image: url(../assets/img/consulting3.png"; }

如果您的网站是加载其他页面内容而不刷新它们的单个索引，您可以这样做。

$(function(){
    $('#aboutlink').click(function(e){
        $('body').removeClass().addClass('about');

        //your other snippets here

        e.preventDefault();
    });
});
于 2012-05-23T22:52:42.680 回答
0

要更改页面的初始状态，您必须等到页面加载完毕后再运行 javascript。

有几种方法可以做到这一点。jQuery 中最常见的有：

1）使用document.ready（）：

$(document).ready(function() {
    $('header').css("background-image","url(assets/img/consulting.png)")
});

2）将您的代码放在<script>标签内，但在正文的末尾（就在</body>标签之前），以便在 HTML 已被解析后运行。

当然，您必须确保您的图像 URL 也是正确的，并且具有可供浏览器找到的适当路径规范。

如果您控制页面的 HTML/CSS，最好将初始状态放入页面的 CSS 样式中，因为页面将从一开始就以正确的方式呈现，而不是以一种方式呈现，然后使用JS 将其更改为另一种方式。

于 2012-05-23T22:46:55.470 回答