Fatal编程技术网
  • javascript/
  • Javascript 根据激活的ID和类更改body的背景图像属性

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

javascript jquery css

Javascript 根据激活的ID和类更改body的背景图像属性,javascript,jquery,css,Javascript,Jquery,Css,我在一个网站上工作，它的所有页面基本上都在主登录页上“滑动”。所以你基本上是从一个ID为“main”的div开始的，这个div也有一个“currentpage”类。如果你点击一个nav菜单项，内容就会滑走，下一页的内容就会滑到位。这个新内容的主div将有一个新的id（比如#about），现在“currentpage”类也被添加到这个div中 问题是，body标签上有一个背景图像（它以前有一个全屏视频，但我将其设置为隐藏，然后后面有一个bg图像）。我想根据您所处的“页面”更改背景图像。首先，我将其

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

问题是，body标签上有一个背景图像（它以前有一个全屏视频，但我将其设置为隐藏，然后后面有一个bg图像）。我想根据您所处的“页面”更改背景图像。首先，我将其设置为#about设置了一个背景图像，然后对页面ID的其余部分进行设置。这方面的问题是，主div的内容被填充了一整串，因此您可以看到指定的#about background image，但实际上您仍然可以从后面的body标记中看到原始图像

因此，我想根据您使用的ID更改实际body标记的背景图像属性

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

以下是我到目前为止尝试过但没有成功的方法：

尝试1：

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

这没用

接下来，我找到并试图修改它，只是为了观察它的运行情况，以了解我是否走上了正确的道路。以下是我使用的：

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

我基本上是想让.video的背景（图像）在你进入#about、#services、#portfolio等网站时发生变化

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

编辑2：
我想出了一个解决办法。以下是我所做的：
1） 我将整个背景色设置为#000，完全删除了原始bg图像，并实际还原了我以前隐藏的全屏视频
2） 我对每个导航菜单项进行了编辑，使其具有hidevid类，但主页链接除外，它是我制作的showvid
3） 我为每个“页面”ID（即#about{background image:url（image）；}）创建了CSS
4） 我创建了一个新的CSS类：.hidethis{display:none；}
5） 然后，我实现了以下jquery：

$(document).ready(function(){
$(".hidevid").click(function(){
    $("video").addClass("hidethis");
});
$(".showvid").click(function(){
    $("video").removeClass("hidethis");
});
}))

这样做的目的是将背景设置为黑色，但在登录（“主页”）页面上看不到背景，只有视频。但是，单击导航菜单项将“滑动”下一个“页面”进入视图，显示其背景图像，并将视频更改为显示：无属性，基本上隐藏它，额外的内容（导航）后面只有一个黑色背景。

使用普通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:

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

css('background-color','red')
我想出了一个解决办法。以下是我所做的： 1） 我将整个背景色设置为#000，完全删除了原始bg图像，并实际还原了我以前隐藏的全屏视频 2） 我编辑了每个导航菜单项，使其具有一个hidevid类，但主页链接除外，我制作了showvid 3） 我为每个“页面”ID（即#about{background image:url（image）；）创建了CSS） 4） 我创建了一个新的CSS类：.hidethis{display:none；} 5） 然后，我实现了以下jquery：

$(document).ready(function(){
$(".hidevid").click(function(){
    $("video").addClass("hidethis");
});
$(".showvid").click(function(){
    $("video").removeClass("hidethis");
});
});
这样做的目的是将背景设置为黑色，但在登录（“主页”）页面上看不到背景，只有视频。但是，单击导航菜单项将“滑动”下一个“页面”进入视图，显示其背景图像，并将视频更改为显示：无属性，基本上隐藏它，并且额外的内容（导航）后面只有一个黑色背景。

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

我假设导航没有背景图像，保持不变。我还假设你已经有了滑动的部分，我没有显示，而是只是一个简单的显示无/块只是为了保持简单。我也没有显示js（但您不需要更改body类），我也没有显示html

正文{
保证金：0；
身高：100%；
}
导航{
高度：50px；
背景色：#ccc；
}
主要{
背景图片：url(https://picsum.photos/200/300?image=0);
背景尺寸：封面；
}
.pt透视图>div{
高度：计算（100vh-50px）；
填充：50px；
背景重复：无重复；
背景色：浅绿色；
背景尺寸：封面；
背景图片：url(https://picsum.photos/200/300?image=0);
显示：无；/*或定位在屏幕外，无论您在何处已有它*/
}
.pt透视图.currentpage{
显示：块；
}
.pt透视图，第1页{
背景图片：url(https://picsum.photos/800?image=1);
}
.pt透视图，第2页{
背景图片：url(https://picsum.photos/800?image=2);
}
.pt透视图，第3页{

$(document).ready(function(){
$(".hidevid").click(function(){
    $("video").addClass("hidethis");
});
$(".showvid").click(function(){
    $("video").removeClass("hidethis");
});
});