JQuery does not change element with `active` class when element is clicked
Question
I am working with a bootstarp nav-bar. Since bootstrap does not automatically switch active tab when tavs are clicked, I have written some JQuery to do this for me. I have done this before, and I cannot figure out what I a doing wrong.
My 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:
$(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. 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. Again I have done this before, but cant get it to work now. What am I doing wrong?
1 answers
solution1
1 ACCPTED 2015-01-25 02:55:45
You are using the .addClass() method on a non-jQuery object.
Wrap event.target with $() --> $(event.target)
$('.tab').on('click', function (event) {
event.preventDefault();
$('.active').removeClass('active');
$(event.target).closest('.tab').addClass('active');
});
A few side notes:
-
ids must be unique, they should not be duplicated. Use classes instead. - Since your're clicking on anchor elements use
event.preventDefault()to prevent the default behavior. Since
$(event.target)is the element being clicked, it will contain the anchor element if it is clicked. Since theactiveclass should be on the parent,lielement, you can either select it using$(event.target).closest('.tab')as in the example above. Or, since the event handler is already attached to the.tabelements, you could also just use$(this).$('.tab').on('click', function (event) { event.preventDefault(); $('.active').removeClass('active'); $(this).addClass('active'); });
After making these changes, take a look at this example .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.