Question

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

多通道
制造
批发

当有人点击其中一个div时，会触发onclick事件，将其带到相关页面：即博客/多频道......

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

默认情况下，三个选项卡显示为非活动background图像（灰色边框，灰色图像），但在悬停时，它们将显示它们的彩色版本。 As shown here

我遇到的问题是因为默认背景图片是在HTML

中设置的

我希望每个背景图片的彩色版本保持活动状态，具体取决于用户所在的网址。

用例：

User clicks on page（显示所有三个类别）＆gt;用户单击“制造”以仅显示制造帖子＆gt;在“制造”点击，user is sent here＆gt; ...从这里开始，由于用户已经过滤制造，我希望红色制造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并在这一行上添加一个类，如＆＃34; MANUFACTURING-CSS-CLASS-ACTIVE＆＃34;

<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

即可

使用JavaScript

2 个答案: