javascript - 使用 JavaScript 根据网站 URL 更改 div 背景图片

Question

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

• 多 channel
• 制造
• 批发

当有人点击这些 div 之一时，将触发一个 onclick 事件，将他们带到相关页面:即博客/多 channel ......

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

默认情况下，三个选项卡显示为未激活的背景图像(灰色边框，灰色图像)，但悬停时它们将显示彩色版本。 As shown here .

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

我希望每个背景图像的彩色版本根据用户访问的 URL 保持事件状态。

用例:

User clicks on page (显示所有三个类别) > 用户单击“制造”以仅显示制造帖子 > 在“制造”上单击，user is sent here > ...从这里开始，由于用户已过滤制造，我希望红色制造 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 个菜单执行此操作