Question

<!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脚本代码，但是没有用。

Answer 1

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

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

但是对于您的特定需求，最好在具有活动伪类的css中执行此操作：

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

如何动态更改活动链接的颜色

1 个答案: