【发布时间】：2018-12-08 03:53:35
【问题描述】：
我正在开发一个网站，它的所有页面基本上都在主着陆页上“滑动”。所以你基本上从一个 ID 为“main”的 div 开始，它也有一个类“currentpage”。如果单击导航菜单项，则内容会滑开，而下一页的内容会滑入到位。这个新内容的主 div 将有一个新的 id（比如说#about），现在“currentpage”类也被添加到这个 div 中。
问题是，body 标签附加了一个背景图像（它曾经有一个全屏视频，但我将其设置为隐藏，然后在它后面有这个 bg 图像）。我想根据您所在的“页面”更改背景图像。起初，我设置它以便 #about 设置背景图像，以此类推其余的页面 ID。关于这个的事情是主 div 的内容被填充了一大堆，所以你会看到指定的 #about 背景图像，但实际上你仍然会从它后面的 body 标签中看到原始图像。
因此，我想根据您使用的 ID 更改实际 body 标记的背景图像属性。
我想出了一些方法来检查您是否在指定的 ID 上，以及该 div 的类是否设置为“currentpage”将是第 1 步，然后在第 2 步更改背景图像，如果该条件是真的。
这是我迄今为止尝试过的，但无济于事：
尝试 1：
if ($this.is('#about')) {
$('.bgimage').css({"background":"url(imageurlhere)"});
}
这没有做任何事情。
接下来，我找到了this old SO thread 并尝试对其进行修改，以查看它的运行情况，以了解我是否走在正确的道路上。这是我使用的：
尝试2：
if ($("#about").hasClass("currentpage")) {
$('#about').css({"background-color":"red"});
}
不幸的是，当我去 About 时，这也没有造成任何不同。
是的，我每次都清除缓存，甚至手动转到 JS 文件以确保它每次都有新的代码块。
编辑
这是基本的页面格式：
<body class="video">
<div class="preload">Whole lot of stuff in here for a preload overlay</div>
<nav>Nav is here</nav>
<main>
<div id="pt-main" class="pt-perspective ">
<div class="page-1 currentpage" id="main"></div>
<div class="page-2" id="about"></div>
<div class="page-3" id="services"></div>
<div class="page-4" id="portfolio"></div>
<div class="page-5" id="contact"></div>
</div>
</main>
如果点击导航中的相应链接，“currentpage”类将转到不同的 div。因此，单击导航中的 About，currentpage 类从#main 中删除，并与#about 出现在相同的 div 中
然后body标签的CSS如下：
.video {
background: url(../img/video_bg.jpg);
background-size: cover;
}
我基本上想让 .video 的背景（图像）在您最终访问 #about、#services、#portfolio 等时发生变化。
TL;DR
谁能帮我解决这个代码块？如何检查具有特定ID的div是否也有类，然后修改.bgimage CSS以更改其背景？
编辑 2：
我想出了一个解决方法。这是我所做的：
1）我将整体背景颜色设置为#000，完全删除了原始的bg-image，实际上恢复了我之前隐藏的全屏视频
2) 我编辑了每个导航菜单项以具有一个 hidevid 类，除了 Home 链接，我制作了 showvid
3) 我为每个“页面”ID 创建了 CSS（即 #about {background-image: url(image);}
4) 我创建了一个新的 CSS 类：.hidethis {display: none;}
5）然后我实现了以下jquery：
$(document).ready(function(){
$(".hidevid").click(function(){
$("video").addClass("hidethis");
});
$(".showvid").click(function(){
$("video").removeClass("hidethis");
});
});
它的作用是将背景设置为黑色，但这在登录（“主页”）页面上看不到，只有视频。但是，单击导航菜单项会将下一个“页面”“滑动”到视图中，显示其背景图像并将视频更改为具有 display: none 属性，基本上隐藏它并且额外的内容（导航）只有黑色背后的背景。
【问题讨论】：
-
你能展示一下这个的html和css吗？
-
什么不起作用？
$('body').css({backgroundImage: 'url(...)'}); -
@MiriamSalzer - 我用 html 和 css 更新了原始帖子
标签： javascript jquery css