基于当前URL更改css div或正文背景图像

我需要这样做的原因是我正在使用的网站使用完全相同的模板来显示多个页面的动态内容。所有页面复制完全相同的div id，因为它们以相同的方式显示内容（除了标题内容！）。标题内容缩短，但div id仍然保留在源代码中。基于当前URL更改css div或正文背景图像

博客索引页面需要显示1个背景图片，而网站上的每个其他页面都显示另一个背景图片。

在此先感谢您的帮助。

来源

2012-09-15 Eric Walley

的这段代码会做你想要什么：

if (window.location.href.indexOf('somepart_of_the_url') != -1) { 
    //Change background to some div 
    $('#somediv').css('backgroundImage','url(images/mybackgroundimage.jpg)'); 
    //Change background to page body 
    $("document.body").css('backgroundImage','url(images/mybackgroundimage.jpg)'); 
}

来源

2012-09-15 00:32:57 Nelson

我试图用这个：如果（！window.location.href.indexOf（ '/云/'）= - 1）{// 更改背景 $ 哪些没有工作。 –

$（'＃body_wrap_3'）是否匹配，即alert（$（'＃body_wrap_3'）。length）是否显示大于零的值？ – Nelson

另外，它是否工作，如果你删除！重要？你需要它吗？ – Nelson

我经常给身体类基于模板或请求路径上的一个名字。我知道你说的，他们都使用相同的模板，但该模板需要PARAMS和则params的一个应该是

body_class

而且你已经填充您的网站，并呈现模板任何控制器/动态的事情，应该通过在当你在/时，'家'。在我以前的经验，我会通过其他的东西，以及使/博客/分类/后可能有一个体类像

<body class="post two-column-a">

那么你的选择是这样的：

body { ... } 
body.home { ... }

来源

2012-09-15 00:36:39 mqsoh

不幸的是，从我所能看到的所有类和div在多个页面中都可以使用。 index.html上的所有内容也位于archiveindex.html –

假设您可以访问从模板生成页面的东西，您应该可以将参数输入更改为模板。你唯一的选择是JavaScript解决方案之一 - 他们是一个混乱。在我的工作地点，这导致旧的背景闪烁，新的背景被取代。 – mqsoh

该作品：

<script language="javascript"> 
$(document).ready(function() { 
if (window.location.href.indexOf('INDEX_URL') != -1) { 
//Change background 
$('#DIV_ID').css({'background-image': 'url(http://URL.com/images/BG.jpg)', 'background-repeat': 'repeat-x', 'background-position': 'center top', 'width': '100%!important', 'min-height': '400px'}); 
} 
}); 
</script>

该代码具有虽然是如果插入目录分为“INDEX_URL”如/文件夹/任何网页/文件夹后/将有背景的缺陷。

来源

2012-09-15 17:34:39

也可以使用“$（function（）{”，它不会等待页面首先加载。 –

基于当前URL更改css div或正文背景图像

回答

相关问题