如何动态更改活动链接的颜色[关闭]答案

【问题标题】：How to change the color of active link dynamically [closed]如何动态更改活动链接的颜色[关闭]
【发布时间】：2020-06-10 14:46:35
【问题描述】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 20px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}


.active {
  background-color: #4CAF50;
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

</style>
</head>
<body>

<div class="header">
  <h2><center>CAMPUS RECRUITMENT SYSTEM</center></h2>
  <!--   <p>**Single stop for all your recruitment destinations.</p>   -->
</div>

<ul>
  <li><a class="active" href="index.php">Home</a></li>
  <li><a href="aboutus.php">About Us</a></li>
  <li><a href="contactus.php">Contact Us</a></li>
  <div class="topnav-right">
  <li><a href="login.php">Login</a></li>
  <li><a href="admin.php">Admin</a></li>
</div>
</ul>




</body>
</html>

请检查代码并帮助我动态更改活动链接的颜色。我不知道该怎么做。我尝试添加一些 java 脚本代码，但没有成功。

【问题讨论】：

你想什么时候改变它？在什么时刻，事件，..？
那么你的javascript在哪里？
当链接到一个链接时，该链接将处于活动状态，并且在另一个链接被滑动之前，该链接必须以某种颜色处于活动状态。
document.querySelector('a.active').style.color = 'red';
@Mamum 请帮忙

标签： javascript jquery html css hyperlink

【解决方案1】：

您可以在JS中使用active类动态更改a标签的颜色，例如：

document.querySelector('a.active').style.color = 'red';

但是对于您的特定需求，最好在带有活动伪类的 css 中进行：

a:active {
  background-color: red;  /* choose your color here */
}

【讨论】：