时间戳

首页 > 解决方案 > 根据激活的 ID 和类更改 body 的背景图像属性

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

问题描述

我正在开发一个网站，该网站的所有页面基本上都在主登录页面上“滑动”。所以你基本上从一个 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)"});

}

这没有做任何事情。

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

尝试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，完全删除了原始背景图像，并实际上恢复了我之前隐藏的全屏视频
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 属性，基本上隐藏它并且额外的内容（导航）只有黑色背后的背景。

标签： javascriptjquerycss

解决方案

使用 vanilla 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/

推荐阅读