单击元素时，jQuery不会使用active类更改元素

Question

I am working with a bootstarp nav-bar. 我正在使用bootstarp导航栏。 Since bootstrap does not automatically switch active tab when tavs are clicked, I have written some JQuery to do this for me. 由于单击tav时引导程序不会自动切换active选项卡，因此我编写了一些JQuery来为我执行此操作。 I have done this before, and I cannot figure out what I a doing wrong. 我之前已经做过，而且我无法弄清楚自己做错了什么。

My HTML: 我的HTML：

<!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>

My JQuery code: 我的JQuery代码：

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

Whenever I click a tab, it should get the first element with the active class, remove the active class, and then add the active class to the element that was clicked. 每当我单击一个选项卡时，它都应该获取具有active类的第一个元素，删除active类，然后将active类添加到单击的元素中。 But it does not work. 但这行不通。 When I click the tab, it does nothing but follow the link. 当我单击选项卡时，它仅执行链接。 I tried changing the use of the pseudo class :first to use Jquery's .first() but that did not work. 我尝试更改伪类的用法:first使用Jquery的.first()但这没有用。 Again I have done this before, but cant get it to work now. 再一次，我之前已经做过，但是现在无法正常工作。 What am I doing wrong? 我究竟做错了什么？

Answer 1

You are using the .addClass() method on a non-jQuery object. 您正在非jQuery对象上使用.addClass()方法。

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

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

A few side notes: 一些注意事项：

id s must be unique, they should not be duplicated. id必须是唯一的，不能重复。 Use classes instead. 改用类。
Since your're clicking on anchor elements use event.preventDefault() to prevent the default behavior. 由于您正在单击锚元素，因此请使用event.preventDefault()来防止默认行为。
Since $(event.target) is the element being clicked, it will contain the anchor element if it is clicked. 由于$(event.target)是要单击的元素，因此如果单击，它将包含锚元素。 Since the active class should be on the parent, li element, you can either select it using $(event.target).closest('.tab') as in the example above. 由于active类应位于父li元素上，因此可以使用$(event.target).closest('.tab')如上例所示。 Or, since the event handler is already attached to the .tab elements, you could also just use $(this) . 或者，由于事件处理程序已经附加到.tab元素，因此您也可以只使用$(this) 。
```
 $('.tab').on('click', function (event) { event.preventDefault(); $('.active').removeClass('active'); $(this).addClass('active'); }); 
```

After making these changes, take a look at this example . 进行这些更改之后，请看以下示例。

单击元素时，jQuery不会使用active类更改元素

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-01-25 02:55:45

单击元素时，jQuery不会使用active类更改元素

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-01-25 02:55:45

解决方案1
1 已采纳 2015-01-25 02:55:45