如何检测页面并根据它对其进行修改

Question

我正在创建一个带有4个部分的栏。每件作品将导致并成为一个不同的页面。我想要做的是，如果用户在页面A例如，我想service-specificBar-tab的背景为某种颜色。比如清酒，红色。然后，如果用户在B后面的那个service-specificBar-tab是另一种不同的颜色，即：紫色。

所以基本上，我该如何去检测用户所在的页面，并使service-specificBar-tab成为某种颜色？或者有没有不同的方式来做到这一点，而不检测页面？

#gray { 
 
\t background: #f9f9f9; 
 
\t width: 100%; 
 
\t height: 700px; 
 
\t position: relative; 
 
} 
 
#service-specificBar-container { 
 
\t position: relative; 
 
\t top: 300px; 
 
\t width: 100%; 
 
\t padding: 25px 0; 
 
} 
 
#service-specificBar { 
 
\t width: 100%; 
 
\t height: 100px; 
 
\t border: 1px solid black; 
 
} 
 
.service-specificBar-tab { 
 
\t width: 25%; 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t margin: 0; 
 
\t padding: 0px; 
 
} 
 
.service-specificBar-tab:nth-child(2) { 
 
\t background: blue; 
 
} 
 
.service-specificBar-tab:nth-child(4) { 
 
\t background: green; 
 
}

<div id="gray"> 
 
\t \t <div id="service-specificBar-container"> 
 
\t \t \t <div id="service-specificBar"><div class="service-specificBar-tab">A 
 
\t \t \t \t </div><div class="service-specificBar-tab">B 
 
\t \t \t \t </div><div class="service-specificBar-tab">C 
 
\t \t \t \t </div><div class="service-specificBar-tab">D 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 1

您可以找到window.location.href实际的URL，这样的话你只是做一个开关来改变某个div的颜色。我还建议，尽管没有必要，将id添加到每个特定于服务的条形标签。

例子：

switch(window.location.href){ 
    case "http://example.com/myFirstPage": 
     $("#firstItemId").addClass("active"); 
     break; 

    case "http://example.com/mySecondPage": 
     $("#secondItemId").addClass("active"); 
     break; 
} 

如果你希望它是一个不同的颜色为每个活动标签在你的CSS

#firstItemId.active { 
    background-color: red; 
    /* active css */ 
} 

定义它如果与哈希到达那里的可能性在网址上，你可以像这样删除它：

var url = window.location.href.split("#")[0];