javascript - 如何检测页面并根据它修改类

Question

我正在创建一个包含 4 block 的条形 block 。每件作品都将指向不同的页面。我想要做的是，如果用户在页面 A 上，例如，我希望该 service-specificBar-tab 的背景是某种颜色。例如清酒，红色。然后，如果用户在 B 上，则 service-specificBar-tab 的背景为另一种不同的颜色，即:紫色。

那么基本上，我将如何检测用户在哪个页面上并使 service-specificBar-tab 成为某种颜色？或者有没有其他方法可以在不检测页面的情况下执行此操作？

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

<div id="gray">
		<div id="service-specificBar-container">
			<div id="service-specificBar"><div class="service-specificBar-tab">A
				</div><div class="service-specificBar-tab">B
				</div><div class="service-specificBar-tab">C
				</div><div class="service-specificBar-tab">D
				</div>
			</div>
		</div>
	</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 */
}

如果有可能通过 url 上的散列到达那里，您可以像这样删除它:

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