Question

我想更改导航栏上当前有效链接的颜色。我已经尝试使用伪类，活动，焦点，悬停，目标，访问，但没有一个工作。

访问过的课程并不完全符合我的要求。颜色需要根据我点击的导航栏上的链接而改变，而不是永远保留。

<ul>
 <li><a href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
</ul>

Answer 1

试试这个：

<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: purple;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<a href="ping.php" target="#">ping</a>
</li>
</ul>
</body>

Answer 2

为了做到这一点，您必须add a class到该项目。：active，：focus，：visited等不适用于您需要的功能。您可以通过添加onclick()来删除所有其他类，并将其添加到最后一个被点击的类中，从而获得所需的功能：

var activeId = "";

function addActiveClass(elId) {
  if (activeId !== "") {
    document.getElementById(activeId).className = "";
  }
  document.getElementById(elId).className = "active";
  activeId = elId;
}

#home-link.active {
  color: red;
}

#news-link.active {
  color: blue;
}

#contact-link.active {
  color: green;
}

#about-link.active {
  color: orange;
}

<ul>
  <li><a href="#home" id="home-link" onclick="addActiveClass('home-link');">Home</a></li>
  <li><a href="#news" id="news-link" onclick="addActiveClass('news-link');">News</a></li>
  <li><a href="#contact" id="contact-link" onclick="addActiveClass('contact-link');">Contact</a></li>
  <li><a href="#about" id="about-link" onclick="addActiveClass('about-link');">About</a></li>
</ul>

更改单击导航链接CSS上的颜色

2 个答案: