html导航栏点击后变色

你可以通过CSS来实现导航栏点击后变色的效果。可以使用`:active`伪类来选中被点击的导航链接，并设置它的背景色或文本颜色等样式。

例如，以下代码可以实现当导航链接被点击时，它的背景色变为红色：

<style>
  /* 未被选中的导航链接样式 */
  .nav-link {
    color: black;
    background-color: white;
  }
  
  /* 被点击的导航链接样式 */
  .nav-link:active {
    background-color: red;
  }
</style>

<nav>
  <a class="nav-link" href="#">链接1</a>
  <a class="nav-link" href="#">链接2</a>
  <a class="nav-link" href="#">链接3</a>
</nav>

当你点击其中的一个链接时，该链接的背景色会变为红色。

相关问题

html导航栏点击后变色不包含java

如果您不想使用JavaScript，您可以使用CSS的:checked伪类来实现导航栏点击后变色的效果。具体做法是，在导航栏的HTML代码中使用input元素作为导航栏元素的标识符，然后在CSS样式中使用:checked伪类为被点击的导航栏元素添加样式。以下是一个示例代码：

HTML代码：

<ul class="nav">
  <li>
    <input type="radio" id="nav-item-1" name="nav-item" checked>
    <label for="nav-item-1">Home</label>
  </li>
  <li>
    <input type="radio" id="nav-item-2" name="nav-item">
    <label for="nav-item-2">About</label>
  </li>
  <li>
    <input type="radio" id="nav-item-3" name="nav-item">
    <label for="nav-item-3">Contact</label>
  </li>
</ul>

CSS样式：

.nav label {
  color: black;
}

.nav input:checked + label {
  color: red;
}

当用户点击某个导航栏元素时，该元素对应的input元素会被选中，从而实现变色的效果。注意，每个input元素的name属性必须相同，否则点击一个导航栏元素会取消其他元素的选中状态。

html网页导航栏被点击变色

你可以通过CSS来实现导航栏被点击后变色的效果。具体操作如下：

1. 给导航栏的每个链接添加一个类名（比如说叫做 "active"）。

2. 在CSS中定义该类名的样式。

.active {
  color: red; /* 文字颜色变为红色 */
  background-color: yellow; /* 背景颜色变为黄色 */
}

3. 使用JavaScript来实现点击链接时给该链接添加 "active" 类名。

var links = document.querySelectorAll(".nav-link"); // 获取所有导航栏链接元素

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", function() {
    // 先移除所有链接的 "active" 类名
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    
    // 给当前点击的链接添加 "active" 类名
    this.className += " active";
  });
}

这样就可以实现导航栏链接被点击后变色的效果了。