Question

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

我要做的是让这张图片在不同的页面上更改。我认为这将是一件非常简单的事情。

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

我意识到没有事件触发器，但我的印象是我不需要实际执行此操作。

我的CSS文件和我正在添加jQuery的页面的文件也在不同的文件夹中，就像img文件夹一样......我不确定我应该在jQuery代码中调用url的位置。它应该像从CSS文件或HTML文件导航一样吗？

谢谢你们，对不起，如果我错过了一些非常明显的东西。

Answer 1

这是我要采用的方法，只是为了从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();
    });
});

Answer 2

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

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

1）使用document.ready（）：

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

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

当然，您必须确保您的图片网址也是正确的，并且浏览器可以找到相应的路径规范。

如果您控制页面的HTML / CSS，那么将初始状态放入页面的CSS样式会好得多，因为页面将从头开始呈现正确的方式而不是单向呈现，然后使用JS将其改为另一种方式。

页面加载时更改jQuery中元素的背景图像？

2 个答案: