如何让当前页面的 link 变成不同的颜色？

Question

我有一个导航菜单，我希望 link 用户当前所在页面的颜色不同。我以为我可以使用 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 加载时，link 为绿色？顺便说一句，从用户体验的角度来看，我很难决定活动 link 的实际颜色应该是什么，有没有关于这个主题的文献？

Answer 1

您需要为活动 link 使用不同的 class。然后在 CSS 中创建一个具有如此不同样式的 class。例如：

第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);
}

Answer 2

您需要在服务器端激活 li。所以在绘制菜单的时候，应该知道加载的是哪一页，设置为：

.menu li:hover, .menu li.active {
    background-color: #f90;
}

HTML

<ul class="menu">
 <li>Item 1</li>
 <li class="active">Item 2</li>
 <li>Item 3</li> 
</ul>

jQuery

var make_button_active = function()
{
  //Get item siblings
  var siblings =($(this).siblings());

  //Remove active class on all buttons
  siblings.each(function (index)
  {
    $(this).removeClass('active');
  }
)

//Add the clicked button class
 $(this).addClass('active');
}

//Attach events to menu
$(document).ready(
 function()
 {
   $(".menu li").click(make_button_active);
 }  
)

Answer 3

你可以试试这个

JsFiddle

var make_button_active = function()
{
  var siblings =($(this).siblings());
  siblings.each(function (index)
  {
    $(this).removeClass('active-page');
  }
)
 $(this).addClass('active-page');
}
$(document).ready(
 function()
 {
   $("a").click(make_button_active);
 }  
)

.a:hover, a.active-page {
   color: rgb(0,128,0);;
}

<!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 class="active-page" href="#">page 1</a>
    <a href="#">page 2</a>
</body>
</html>

如何让当前页面的 link 变成不同的颜色？

How to have current page's link a different color?

html

css

wordpress

user-experience