Question

我正在创建一个包含4个部分的栏。每件作品都将导致并成为一个不同的页面。我想要做的是，如果用户位于页面A上，我希望service-specificBar-tab的背景为某种颜色。例如，红色。然后，如果用户在B上，则service-specificBar-tab的背景为另一种不同的颜色，即：紫色。

基本上，我如何检测用户所在的页面并使service-specificBar-tab成为某种颜色？或者在没有检测到页面的情况下有不同的方法吗？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以找到window.location.href的实际网址，这样您就可以切换以更改某个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];

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

1 个答案: