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

我在一个网站上工作，它的所有页面基本上都在主登录页上"滑动"。所以你基本上是从一个ID为"main"的div开始的，这个div也有一个类"currentpage"。如果你点击一个导航菜单项，内容就会消失，下一页的内容就会滑到合适的位置。这个新内容的主div将有一个新的id(比如#about)，现在"currentpage"类也被添加到这个div中。

问题是，body标签上有一个背景图像(它以前有一个全屏视频，但我把它设置为隐藏，然后后面有这个bg图像)。我想根据你所在的"页面"更改背景图像。起初，我设置了它，以便#about设置了背景图像，依此类推，以获取其余的页面ID。这是因为主div的内容被填充了一整堆，所以你会看到指定的#about背景图像，但实际上你仍然会看到它后面的body标签中的原始图像

因此，我想根据你使用的ID来更改实际身体标签的背景图像属性

我想了一些方法来检查您是否在指定的ID上，以及该div的类是否设置为"currentpage"将是步骤1，如果该条件成立，则步骤2将更改背景图像。

以下是我迄今为止尝试过的，但没有成功：

尝试1:

if ($this.is('#about')) { 
$('.bgimage').css({"background":"url(imageurlhere)"});

}

这没有任何作用。

接下来，我找到了这个旧的SO线程，并试图对其进行修改，只是为了看看它是否在运行，以了解我是否走上了正确的道路。这是我使用的：

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

如果单击导航中的相应链接，"currentpage"类将转到另一个div。因此，单击导航中的About，currentpage类从#main中删除，并最终位于与#About 相同的div中

然后body标签的CSS如下：

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

}

我基本上想让视频的背景(图像)在你上#about、#services、#portfolio等时发生变化。

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

编辑2：
我想出了一个解决方法。以下是我所做的：
1)我将整体背景色设置为#000，完全删除了原始bg图像，并实际恢复了我之前隐藏的全屏视频
2)我编辑了每个导航菜单项，使其具有一个hidevid类，但主页链接除外，我制作了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属性，基本上隐藏了它，额外的内容(导航)后面只有黑色背景。

使用香草JavaScript(纯JavaScript)，您可以检查div是否有特定的类名，并根据结果更改css：

var x = document.getElementById('about');
var y = document.querySelector('.bgimage');
if (x.classList.contains('currentpage')){ // if #about has "currentpage" class, run the following
x.style.background = 'red';               //change background-color of #about to red
y.style.background = 'url(imageurlhere)'; // change background-image of .bgimage
}

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

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

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

我想出了一个解决方法。以下是我所做的：1) 我将整体背景色设置为#000，完全删除了原始bg图像，并实际恢复了我之前隐藏的全屏视频2) 我编辑了每个导航菜单项，以拥有一个hidevid类，除了主页链接，我制作了showvid3) 我为每个"页面"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");
});
});

我做了很多假设和猜测。您只显示了一个css类。从描述来看，问题似乎实际上是使用CSS来覆盖背景，如果不是这样，就没有必要更改主体上的类。基本的解决方案是，将初始背景从body移到#maindiv，将填充移到.page-1、.page-2等div。此外，如果背景图像是透明的，也会给出背景颜色。

我假设导航没有背景图像并且保持不变。我还假设你已经有了部分的滑动，我没有显示，而是只是一个简单的显示none/block，只是为了保持简单。我也没有显示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>

相关内容

最新更新

热门标签：