时间戳

首页 > 解决方案 > 使用哈希或 url 片段时设置活动链接样式？

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

问题描述

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

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

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

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>

标签： htmlcss

解决方案

您可以使用:target伪类：

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

:target CSS 伪类表示一个唯一元素（目标元素），其 id 与 URL 的片段匹配。

推荐阅读