使用哈希或 url 片段时设置活动链接样式?

Question

活动链接不显示当前页面的样式吗？我正在尝试在活动页面上应用样式，但它不起作用。我正在使用网址哈希或网址片段。

使用单页应用程序时，您可能有：

• /我的页面.html#首页
• /我的页面.html#产品
• /我的页面.html#服务
• /我的页面.html#关于

如果链接处于活动状态，我希望所选页面下方有一个红色下划线。

a {
text-decoration: none;
}
#menubar > a {
padding: 10px;
background-color: transparent;
border: 2px solid transparent;
}
#menubar > a:hover {
cursor: pointer;
border-bottom: 2px solid #585858;
}
#menubar > a:active {
cursor: pointer;
border-bottom: 2px solid #FF0000;
}

<div id="menubar">
		<a id="Home" href="#home">
			<span>Home</span>
		</a>
		<a id="Products" href="#products">
			<span>Products</span>
		</a>
		<a id="Services" href="#services">
			<span>Services</span>
		</a>
		<a id="About" href="#about">
			<span>About</span>
		</a>
		<a id="Contact" href="#contact">
			<span>Contact</span>
		</a>
	</div>

Answer 1

您可以使用伪类:target：

:target {
cursor: pointer;
border-bottom: 2px solid #FF0000;
}

：target CSS 伪类表示一个唯一的元素(目标 元素(，其 ID 与 URL 的片段匹配。