使用JavaScript根据网站URL更改div背景图像

我在创建的网站上有三个选项：

• 多通道
• 制造业
• 批发

当有人点击其中一个div时，将触发onclick事件，该事件将把他们带到相关页面：即blog/多频道

但是，所有三个页面都使用相同的模板

默认情况下，这三个选项卡显示为非活动的背景图像（灰色边框、灰色图像），但悬停时，它们将显示它们的彩色版本

我遇到的问题是，默认背景图像是在HTML中设置的

我希望每个背景图像的彩色版本根据用户所在的URL保持活动状态

用例：

（显示所有三个类别）>用户单击“制造”仅显示制造帖子>在“制造”上单击，>。。。从这里开始，由于用户已经过滤了制造，我希望红色的制造背景保持活跃

问题是所有四个页面（三个类别和中心页面），它们都使用相同的模板。因此，我不确定如何处理“

如果此类别的用户，背景：url=this…

”

想知道JavaScript是否能帮上忙吗

片段：

现场示例如下：

a{
文字装饰：无；
}
.row.blogFilter.span4{
高度：168px；
}
.row.blogFilter.span4.消息{
背景色：透明！重要；
边缘顶部：15px；
填充：20px；
文本对齐：居中；
颜色：#333；
字体大小：粗体；
}
/***悬停属性***/
.row.blogFilter.span4:n子级（1）：悬停{
背景：url（'https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/1-active.png'）50%50%不重复！重要；
背景尺寸：封面；
颜色：#005aa0；
}
.row.blogFilter.span4:n第n个子项（2）：悬停{
背景：url（'https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/2-active.png'）50%50%不重复！重要；
背景尺寸：封面；
}
.row.blogFilter.span4:n子级（3）：悬停{
背景：url（'https://www.sanderson.com/hubfs/Customers%20-%20Blog%20Page/3-active.png'）50%50%不重复！重要；
背景尺寸：封面；
}
.span4：悬停。消息。多通道{
颜色：#005aa0；
}
.span4：悬停。消息。制造{
颜色：#b51c22；
}
.span4：悬停。信息。批发{
颜色：#009ae4；
}

多渠道零售
制造业
批发分销

更改：

<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>

您可以对所有3个菜单执行此操作更改：

<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>

---

您可以对所有3个菜单执行此操作，只需将

window.location.href

替换为

window.location.pathname
只需将
window.location.href
替换为
window.location.pathname
谢谢您的回答！我已经根据你的建议修改了我的JS和CSS类。它还是因为某种原因不起作用？只执行悬停属性是的，在您的控制台中，您有以下错误：未捕获类型错误：无法在制造时读取null的属性'style'：121您删除了div中的id=“manufacturing active”，id=“批发active”，尝试在html中写下它们，它应该可以工作：）啊，我在html中定义了它，但是我通过在
$（document.ready）中包装JS解决了这个问题（function（）{
-现在一切正常-谢谢！）谢谢你的回答！我已经根据你的建议修改了我的JS和CSS类。由于某些原因，它仍然不起作用？只执行悬停属性是的，在你的控制台中，你有以下错误：未捕获类型错误：无法在制造时读取null的属性“style”：121你删除了id=“manufacturing active”，id=“批发活动”在你的div中，尝试将它们写在你的html中，它应该可以工作：）啊，我已经在html中定义了它，但是我通过将JS包装在
$（文档）中解决了这个问题。准备好了（function（）{
-现在一切都可以工作了-谢谢！）嗨，SG，谢谢你的回答。我已将href修改为路径名，但仍然不走运…嗨，SG，谢谢你的回答。我已将href修改为路径名，但仍然不走运。。。
<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>

.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";
}