Question

我正在一个网站上，其所有页面基本上都在主登录页面上“滑动”。因此，您基本上从一个ID为“ main”的div开始，该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"});

}

不幸的是，当我转到“关于”时，这也没有引起任何不同。

是的，我每次都清除了缓存，甚至手动访问了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>

如果单击导航中的相应链接，则“当前页”类将转到另一个div。因此，在导航栏中单击“关于”，currentpage类将从#main下降，并与#about

处于同一div

然后，body标记的CSS如下：

.video {
background: url(../img/video_bg.jpg);
background-size: cover;

}

我基本上是想做到这一点，以便最终在＃about，＃services，＃portfolio等上时，.video的背景（图像）发生变化。

TL; DR
谁能帮我这个代码块？如何检查具有特定ID的div是否也有一个类，然后修改.bgimage CSS以更改其背景？

编辑2 ：
我想出了一个解决方法。这是我做的：
1）我将整体背景色设置为＃000，完全删除了原始bg图像，并实际上恢复了我先前隐藏的全屏视频
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");
});

}）;

这是将背景设置为黑色，但是在着陆页（“主页”）上看不到，只有视频。但是，单击导航菜单项会将“下一个”页面“滑入”视图，显示其背景图像并更改视频以显示：none属性，基本上将其隐藏，并且多余的内容（导航）只有黑色背景。

Answer 1

使用香草JavaScript（纯JavaScript），您可以检查div是否具有特定的类名，并根据结果通过以下操作更改CSS：

db.collection.insert('"data":[{"name":"John","age": 30},{"name": "Mark", "age": 45}]')

jsFiddle： http://jsfiddle.net/AndrewL64/nqjypevh/10/

Answer 2

您的密码是错误的。真正的用法是这样。

css('background-color','red')

Answer 3

我想出了一个解决方法。这是我所做的： 1）我将整体背景色设置为＃000，完全删除了原始的bg图像，并实际上恢复了我之前隐藏的全屏视频 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");
});
});

这是将背景设置为黑色，但是在着陆页（“主页”）上看不到，只有视频。但是，单击导航菜单项会将“下一个”页面“滑入”视图，显示其背景图像并更改视频以显示：none属性，基本上将其隐藏，并且多余的内容（导航）只有黑色背景。

Answer 4

我正在做很多假设和猜测。您只显示了一个CSS类。从描述中听起来，问题实际上是使用CSS覆盖了背景，如果不是这样，则无需更改主体上的类。基本解决方案是将初始背景从主体移至#main div，将填充移至.page-1，.page-2等div。另外，如果背景图像是透明的，还可以提供背景颜色。

我假设导航没有背景图像，并且保持原状。我还假设您已经将各部分滑动到位，我没有显示出来，而是只是简单地显示了一个/不显示以保持简单。我也没有显示js（但是您不需要更改body类。）我也没有留下html。

body {
  margin: 0;
  height: 100%;
}

nav {
  height: 50px;
  background-color: #ccc;
}

main {
  background-image: url(https://picsum.photos/200/300?image=0);
  background-size: cover;
}

.pt-perspective > div {
  height: calc(100vh - 50px);
  padding: 50px;
  background-repeat: no-repeat;
  background-color: aqua;
  background-size: cover;
  background-image: url(https://picsum.photos/200/300?image=0);
  display: none; /* or positioned off screen, wherever you already have it */
}

.pt-perspective .currentpage {
  display: block;
}

.pt-perspective .page-1 {
  background-image: url(https://picsum.photos/800?image=1);
}
.pt-perspective .page-2 {
  background-image: url(https://picsum.photos/800?image=2);
}
.pt-perspective .page-3 {
  background-image: url(https://picsum.photos/800?image3);
}
.pt-perspective .page-4 {
  background-image: url(https://picsum.photos/800?image=4);
}
.pt-perspective .page-5 {
  background-image: url(https://picsum.photos/600?image=5);
}

<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>

根据激活的ID和类别更改主体的背景图像属性

4 个答案: