基於當前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或正文背景圖像

回答

相關問題