时间戳

首页 > 解决方案 > 无法在 href 标签上添加类

javascript - 无法在 href 标签上添加类

问题描述

当我点击它时，我需要在 href 标签上添加类。我正在使用 jquery 的 .addclass 函数，但它对我不起作用。这是我的代码。

$(document).ready(function(){
  $('addClass').click(function(){
    $('addClass').removeClass("active");
    $(this).addClass("active");
});
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



<a href="#" id="addClass">clickme</a><br>
<a href="#" id="addClass">clickme</a><br>
<a href="#" id="addClass">clickme</a><br>
<a href="#" id="addClass">clickme</a>

这是我的代码。问题是无法在单击 href 时添加类，如果 somoen href 标记已经必须删除该类，也无法删除该类。

标签： javascriptjquery

解决方案

  1. 您不能有重复的 ID
  2. 你有一个错字错过了类型选择器（在你的情况下是#，但由于1，这无论如何都不会起作用）

$(function() {
  $('.addClass').click(function() {
    $('.addClass').removeClass("active");
    $(this).addClass("active");
  });
});
.active  { background-color:red }
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



<a href="#" class="addClass">clickme</a><br>
<a href="#" class="addClass">clickme</a><br>
<a href="#" class="addClass">clickme</a><br>
<a href="#" class="addClass">clickme</a>

推荐阅读