使用JavaScript根據網站URL更改div背景圖像

Question

我要創建的網站上有三個選項：

• 多渠道
• 制造業
• 批發

當某人單擊這些div之一時，將觸發一個onclick事件，將其帶到相關頁面：即blog / multi-channel ...

但是，所有三個頁面都使用相同的模板。

默認情況下，這三個選項卡顯示為非活動background圖像（灰色邊框，灰色圖像），但是懸停時它們將顯示它們的彩色版本。 如圖所示 。

我遇到的問題是因為在HTML中設置了默認背景圖片

我希望每個背景圖像的彩色版本保持活動狀態，具體取決於用戶所使用的URL。

用例 ：

用戶單擊頁面 （顯示所有三個類別）>用戶單擊“制造”以僅顯示制造職位>單擊“制造”時，將用戶發送到此處 > ...從這里開始，因為用戶已過濾制造，所以我希望紅色制造業BG保持活躍。

問題是所有四個頁面（三個類別和中心頁面），它們都使用相同的模板。 因此，我不確定如何執行“ if user on this category, background: url = this ... ”。

想知道JavaScript是否可以幫上忙？

片段 ：

此處的實時示例： https ： //www.sanderson.com/customers

 a { text-decoration: none; } .row.blogFilter .span4 { height: 168px; } .row.blogFilter .span4 .message { background-color: transparent !important; margin-top: 15px; padding: 20px; text-align: center; color: #333; font-weight: bold; } /*** HOVER PROPERTIES***/ .row.blogFilter .span4:nth-child(1):hover { background: url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/1-active.png')50% 50% no-repeat !important; background-size: cover; color: #005aa0; } .row.blogFilter .span4:nth-child(2):hover { background: url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/2-active.png')50% 50% no-repeat !important; background-size: cover; } .row.blogFilter .span4:nth-child(3):hover { background: url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/3-active.png')50% 50% no-repeat !important; background-size: cover; } .span4:hover .message .multi-channel { color: #005aa0; } .span4:hover .message .manufacturing { color: #b51c22; } .span4:hover .message .wholesale { color: #009ae4; } 

 <div class="row blogFilter"> <div id="multi-active" class="span4" onclick="window.location.href='/customers/topic/multi-channel-retail';" style="background: url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/1-inactive.png') 50% 50% no-repeat;"> <div class="message"><span id="multi-text" class="multi-channel filter-link-count">Multi-Channel Retail </span></div> </div> <div id="manufacturing-active" class="span4" onclick="window.location.href='/customers/topic/manufacturing';" style="background: url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/2-inactive.png') 50% 50% no-repeat;"> <div class="message"><span id="manufacturing-text" class="manufacturing">Manufacturing</span></div> </div> <div id="wholesale-active" class="span4" onclick="window.location.href='/customers/topic/wholesale-distribution';" style="background: url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/3-inactive.png') 50% 50% no-repeat;"> <div class="message"><span id="wholesale-text" class="wholesale">Wholesale Distribution</span></div> </div> </div> 

編輯 ：

我試過的

 <script type="text/javascript"> if(window.location.href === "/customers/topic/multi-channel-retail") { document.getElementById("multi-active").style.backgroundImage = "url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/1-active.png')"; document.getElementById("multi-text").style.color = "#005aa0"; } else if(window.location.href === "customers/topic/manufacturing") { document.getElementById("manufacturing-active").style.backgroundImage = "url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/2-active.png')"; document.getElementById("manufacturing-text").style.color = "#b51c22"; } else if(window.location.href === "/customers/topic/wholesale-distribution") { document.getElementById("wholesale-active").style.backgroundImage = "url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/3-active.png')"; document.getElementById("wholesale-text").style.color = "#009ae4"; } </script> 

我在上面的想法是檢查用戶是否在哪個URL上，然后相應地更改背景圖像。

Answer 1

更改：

<script type="text/javascript">
    if(window.location.href === "/customers/topic/multi-channel-retail") {
        document.getElementById("multi-active").style.backgroundImage = "url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/1-active.png')";
        document.getElementById("multi-text").style.color = "#005aa0";
    }
    else if(window.location.href === "customers/topic/manufacturing") {
        document.getElementById("manufacturing-active").style.backgroundImage = "url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/2-active.png')";
        document.getElementById("manufacturing-text").style.color = "#b51c22";
    } 
    else if(window.location.href === "/customers/topic/wholesale-distribution") {
        document.getElementById("wholesale-active").style.backgroundImage = "url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/3-active.png')";
        document.getElementById("wholesale-text").style.color = "#009ae4";
    } 
</script>

有了這個：

<script type="text/javascript">
    if(window.location.pathname === "/customers/topic/multi-channel-retail") {
        document.getElementById("multi-active").style.backgroundImage = "url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/1-active.png')";
        document.getElementById("multi-text").style.color = "#005aa0";
    }
    else if(window.location.pathname === "/customers/topic/manufacturing") {
        document.getElementById("manufacturing-active").style.backgroundImage = "url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/2-active.png')";
        document.getElementById("manufacturing-text").style.color = "#b51c22";
    } 
    else if(window.location.pathname === "/customers/topic/wholesale-distribution") {
        document.getElementById("wholesale-active").style.backgroundImage = "url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/3-active.png')";
        document.getElementById("wholesale-text").style.color = "#009ae4";
    } 
</script>

這可以解決問題，但是我建議您修改HTML並在此行上添加一個類，例如“ MANUFACTURING-CSS-CLASS-ACTIVE”

<div id="manufacturing-active" class="span4 MANUFACTURING-CSS-CLASS-ACTIVE" onclick="window.location.href='/customers/topic/manufacturing';" style="background: url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/2-inactive.png?t=1528443115464') 50% 50% no-repeat;">
<div class="message"><span id="manufacturing-text" class="manufacturing">Manufacturing</span></div>
</div>

並在您的.css中添加

.MANUFACTURING-CSS-CLASS-ACTIVE { //change the name of the class
   backgroundImage: "url('https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/2-active.png')";
   color:"#009ae4";
}

您可以為所有3個菜單執行此操作

Answer 2

只需將window.location.href替換為window.location.pathname