Question

我有一个导航菜单，我希望用户当前所在页面的链接是另一种颜色。我想我可以使用：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，它的链接将是绿色的？顺便说一句，从用户体验的角度来看，我很难确定活动链接的实际颜色应该是什么，是否有关于该主题的文献？

Answer 1

您需要为活动链接使用其他类。然后在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);
}

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何让当前页面的链接颜色不同？

3 个答案: