单击元素时，JQuery 不会更改具有“活动”类的元素

JQuery does not change element with `active` class when element is clicked

本文关键字：元素 活动 JQuery 单击      更新时间：2023-09-26

我正在使用bootstarp导航栏。由于 bootstrap 在单击 tavs 时不会自动切换active选项卡，因此我编写了一些 JQuery 来为我执行此操作。我以前做过这件事，我不知道我做错了什么。

我的网页：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="public'bootstrap-3.3.2-dist'css'bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="public'bootstrap-3.3.2-dist'css'bootstrap-theme.min.css">
  <link rel="stylesheet" type="text/css" href="public'styles'style.css">
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script src="public'bootstrap-3.3.2-dist'js'bootstrap.min.js"></script>
  <script src="public'js'script.js"></script>
</head>
<body>
  <div class="header">
  <h1><em>This is a test</em></h1>
  </div>
  <ul class="nav nav-tabs">
    <li id="tab" class="active"><a href="1.html">Page 1</a></li>
    <li id="tab"><a href="1.html" target="content">Page 2</a></li>
    <li id="tab"><a href="1.html" target="content">Page 3</a></li>
  </ul>
</body>
</html>

我的 JQuery 代码：

$(document).ready(function() {
  $('#tab').click(function(event) {
    $('.active:first').removeClass('active');
    el = event.target;
    el.addClass('active');
  });
});

每当我单击选项卡时，它都应该获取具有 active 类的第一个元素，删除 active 类，然后将active类添加到单击的元素中。但它不起作用。当我单击该选项卡时，它除了点击链接外什么也不做。我尝试将伪类:first的使用更改为使用 Jquery 的.first()但这不起作用。我以前也这样做过，但现在无法让它工作。我做错了什么？

您正在非 jQuery 对象上使用 .addClass() 方法。

用$()包裹event.target --> $(event.target) 

$('.tab').on('click', function (event) {
    event.preventDefault();
    $('.active').removeClass('active');
    $(event.target).closest('.tab').addClass('active');
});

一些旁注：

  • id必须是唯一的，它们不应该重复。请改用类。
  • 由于您正在单击锚元素，因此请使用event.preventDefault()来防止默认行为。

  • 由于$(event.target)是被单击的元素，因此如果单击该元素，它将包含锚元素。由于active类应位于父元素li元素上，因此您可以使用$(event.target).closest('.tab')选择它，如上例所示。或者，由于事件处理程序已附加到.tab元素，因此也可以只使用 $(this) 。

    $('.tab').on('click', function (event) {
    event.preventDefault();
    $('.active').removeClass('active');
    $(this).addClass('active');
});

进行这些更改后，请查看此示例。

相关文章：