我有一个导航菜单，我希望指向用户当前所在页面的链接是不同的颜色。我以为我可以使用 a:active(或 a:focus)，但它们只是闪烁不同的颜色，当新页面加载时，它具有默认颜色。
我正在使用 Wordpress，但在做了一个简单的实验后，我仍然对结果感到惊讶。
page1.html
<!DOCTYPE html>
<head>
<title>css link test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
This is a test.<br />
<a href="page1.html">page 1</a>
<a href="page2.html">page 2</a>
</body>
</html>
page2.html
<!DOCTYPE html>
<head>
<title>css link test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
This is another page.<br />
<a href="page1.html">page 1</a>
<a href="page2.html">page 2</a>
</body>
</html>
mystyle.css
a:active {
color: rgb(0,128,0);
}
我怎样才能让它在加载 page2.html 时，它的链接是绿色的？顺便说一句，从用户体验的 Angular 来看，我很难决定事件链接的实际颜色应该是什么，有没有关于这个主题的文献？
最佳答案
您需要为事件链接使用不同的类。然后在 CSS 中创建一个具有这些不同样式的类。例如:
第1页
<!DOCTYPE html>
<head>
<title>css link test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
This is a test.<br />
<a href="page1.html" class="active_page">page 1</a>
<a href="page2.html">page 2</a>
</body>
</html>
mystyle.css
.active_page{
color: rgb(0,128,0);
}
关于html - 如何让当前页面的链接具有不同的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48824292/