jquery - 根据容器上的类切换主体颜色

Question

我们正在使用 1 个包含标签的 index.html 页面，在 css 中，正文设置为背景色 #ddd。 index.html 页面是包含所有其他页面的主要模板。因此我无法在主体上指定多种背景颜色，因为它仅使用 1 个索引页面。

index.html 中包含的其余页面，例如:services.html 将以:

 <div class="container">services content here</div>

是否可以使用 CSS 以某种方式在容器上添加一个类来切换主体的背景颜色？例如:

 <div class="container bgWhite">services content here</div>
 <div class="container bgDKGrey">contact content here</div>
 <div class="container bgBlue">reviews content here</div>

然后做类似的事情:

 body .container.bgWhite body {background:white;}

我不确定该怎么做？

编辑:

这不会像这里有人发布的那样工作吗:

 $('.container').hasClass('bgWhite') {
    $('body').css('backround', 'white');
 } 

不过，如果我想在正文的多个背景颜色之间切换，我该如何为多个背景颜色执行此操作？

Answer 1

您可以尝试使用 Jquery，类似的东西:

if ( $(".container").hasClass("bgBlue") ){
    $("body").css('background', 'blue');
};

这是一个 fiddle :http://jsfiddle.net/tcjagypy/