如何檢測頁面並根據它對其進行修改

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