我在创建的网站上有三个选项:
当有人点击其中一个div时,会触发onclick事件,将其带到相关页面:即博客/多频道......
但是,所有三个页面都使用相同的模板。
默认情况下,三个选项卡显示为非活动background
图像(灰色边框,灰色图像),但在悬停时,它们将显示它们的彩色版本。 As shown here
我遇到的问题是因为默认背景图片是在HTML
中设置的我希望每个背景图片的彩色版本保持活动状态,具体取决于用户所在的网址。
用例:
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是否相应,然后相应地更改背景图像。
答案 0 :(得分:2)
变化:
<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个菜单执行此操作
答案 1 :(得分:0)
只需将window.location.href
替换为window.location.pathname