根據當前網址更改CSS div或正文背景圖片

Question

我需要這樣做的原因是，我正在工作的網站使用完全相同的模板來顯示多個頁面的動態內容。 所有頁面都復制完全相同的div id，因為它們以相同的方式顯示內容（標題內容除外！）。 標頭內容縮短了，但是div id仍然保留在源代碼中。

博客索引頁面需要顯示1個背景圖像，而網站上的其他頁面都需要顯示另一個背景圖像。

在此先感謝您的幫助。

Answer 1

此代碼段將滿足您的要求：

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)');
}

Answer 2

我經常根據模板或請求路徑為body類命名。 我知道您說過，它們都使用相同的模板，但是該模板具有參數，並且其中一個參數應該是

body_class

而且，無論您在網站中填充了什么控制器或動態內容並呈現了模板，都應該在/時將其傳遞給“ home”。 根據我以前的經驗，我還將傳遞其他內容，以便/ blog / category / post可能具有類似於

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

然后，您的選擇器如下所示：

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

Answer 3

這有效：

<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”（例如/ folder /），則/ folder /之后的任何頁面都會具有該背景。

根據當前網址更改CSS div或正文背景圖片

問題描述

3 個解決方案

解決方案1
1 2012-09-15 00:32:57

解決方案2
0 2012-09-15 00:36:39

解決方案3
0 2012-09-15 17:34:39

根據當前網址更改CSS div或正文背景圖片

問題描述

3 個解決方案

解決方案1 1 2012-09-15 00:32:57

解決方案2 0 2012-09-15 00:36:39

解決方案3 0 2012-09-15 17:34:39

解決方案1
1 2012-09-15 00:32:57

解決方案2
0 2012-09-15 00:36:39

解決方案3
0 2012-09-15 17:34:39