I am working on a project i am having some anchors like tab, each have some CSS class, the selected tab have separate css class. I am clicking on tab and i want to change its CSS class to selected css class i have done this functionality but i am having some problems with it is that previously selected tab also having same class, how can i change the previous selected tab to unselected class,Below is my code
$(".btn").each(function ()
{
$(this).click(function () {
$(this).removeClass("course-btn-tab").addClass("course-btn-tab-selected");
});
});
<div class="course-Search-tabs">
A
B
C
D
</div>
You do not need to use each here, on click of element with class btn remove class for all elements with class btn and assign the desired class to current element (referred by $(this)) which is event source. Also I assume you want to remove selected class from previous elements.
$(".btn").click(function () {
if($(this).hasClass("course-btn-tab-selected"))
$(".btn").removeClass("course-btn-tab-selected").addClass("course-btn-tab");
$(this).addClass("course-btn-tab-selected");
});
Edit: You can improve this by hold the last selected element and changing it class if it suits you.
previouslyClicked = $(".btn").eq(0); //Assuming first tab is selected by default
$(".btn").click(function () {
previouslyClicked.removeClass("course-btn-tab-selected").addClass("course-btn-tab");
$(this).addClass("course-btn-tab-selected");
previouslyClicked = $(this);
});
Wrong usage of $.each()
Use this way:
$(".btn").click(function () {
$(".btn").removeClass("course-btn-tab-selected");
$(this).addClass("course-btn-tab-selected");
});
Should do the trick:
$(".btn").click(function () {
$(".course-btn-tab-selected").removeClass("course-btn-tab-selected").addClass('course-btn-tab');
$(this).removeClass('course-btn-tab').addClass("course-btn-tab-selected");
});
There is another way:
$(".btn").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("course-btn-tab-selected").addClass('course-btn-tab');
$(this).addClass("course-btn-tab-selected");
});
First you need bind a click event to "btn" CSS class using a jQuery selector, this will allow you manipulate all of the buttons at once.
Next find the previously selected button, remove the selected class and add the regular class.
Finally remove the regular class from the clicked button and add the selected class.
$('.btn').bind('click', function () {
var previouslySelectedButton = $('.course-btn-tab-selected');
var selectedButton = $(this);
if (previouslySelectedButton)
previouslySelectedButton.removeClass('course-btn-tab-selected').addClass('course-btn-tab');
selectedButton.removeClass('course-btn-tab').addClass('course-btn-tab-selected');
});
Alternatively here is a working example using your HTML: jsFiddle
Related
I'm trying to update a modal & video attributes on button click.
It works well but the problem is that it only apply this when i click on the first button ( first element with the class videoBtn ), i want it to be applied on all other buttons with the same class
here is my code
$(".videoBtn").click(function(){
$("#video").attr('src',$(".videoBtn").data('src'));
$(".modal").attr('id', $(".videoBtn").data('target').substring(1));
});
You are not using value of currently clicked element, but first with class, you should use $this instead of $('.videoBtn')
$(".videoBtn").click(function(){
$("#video").attr('src',$(this).data('src'));
$(".modal").attr('id', $(this).data('target').substring(1));
});
$(".videoBtn").each(function(){
$(this).on('click', function() {
$("#video").attr('src',$(".videoBtn").data('src'));
$(".modal").attr('id', $(".videoBtn").data('target').substring(1));
})
})
I have a Li element (dropdown) that gets an Active class when parent div (button) is clicked. When this element have this class I want to give another div the same class. When the li element (dropdown) is clicked again the active class is removed, I then want to remove the active class on the second div aswell.
What I got so far:
$('document').ready(function() {
if ($('li').hasClass('active')) {
$("#site-overlay").addClass("active");
}
});
This works a bit on the way in console- it gives my second div the correct class. It doesnt work live though, I guess I cant just call it on pageload? It also doesnt remove the class.
$('li').on('click', function(){
if($(this).hasClass('active')) {
$("#site-overlay").addClass("active");
} else {
$("#site-overlay").removeClass("active");
}
});
Your current example is not setting the active class on the LI elements, so nothing happens, but it should work something like this:
$(function () {
$('ul.megamenu > li').on('click', function () {
$("#site-overlay").toggleClass("active", $(this).hasClass('active'));
});
});
toggleClass can take a second boolean parameter that controls turning on/off the class based on a true/false value.
Note: I hacked the following JSFiddle just to show something working (the clicking just toggles the site-overlay state for now):
https://jsfiddle.net/TrueBlueAussie/doxdmxmL/16/
I have a follow up question to this: Add and remove a class on click using jQuery?
I'm able to add a class to a specific li element using this snipped by Jamie Taylor:
$('.team').on('click', 'li', function() {
$('.team li#member').removeClass('more');
$(this).addClass('more');
});
I'd like to remove the Class .more again, by clicking a toggle element inside the li-item.
My jQuery Snippet which doesn't work:
$('.toggle-x').click(function () {
$('.team li#member').removeClass('more');
})
Thanks for the help!
In your code, it will remove the class form only one element with id member. If you want to remove the class from all the li elements, use like this,
$('.team li.more').removeClass('more');
try this
$(".innerLiContent").click(function(){
$(this).parentsUntil( "li" ).removeClass('more');
});
Your problem is because when you click on an element X inside the <li /> the element fires the click event, and if you don't use event.stopPropagation() the <li /> will also fire the click event and the class will be added again.
Try this:
$('.toggle-x').click(function (e) {
$('.team li#member').removeClass('more');
e.stopPropagation();
})
It should work if that's your problem.
I'm trying to toggle a class on a single button, where the class would be dynamically assigned based on a state. Here is my code:
$('body').on('click', '.button', function () {
var $itm = $(this).children(".icon");
if ($itm.hasClass('hide')) {
$itm.toggleClass('unhide', 'hide')
} else {
$itm.toggleClass('hide', 'unhide')
}
});
What I'm trying to achieve is this:
If a button has class .hide, the onclick toggles this class to .unhide, and vice versa.
So far the only time class toggling works is, is on the second click. The first click does not change anything.
.toggleClass accepts one or more class names separated by a space like this:
$('body').on('click', '.button', function () {
$(this).children(".icon").toggleClass("hide unhide");
});
Working example (with a tweak to your HTML): http://jsfiddle.net/jfriend00/9tV33/
I have this code and I want to add active class to button .loginhead (to remove and add class when click and when content show and hide). How I can do that?
$(".top .login").hide('', function () {
$('.loginhead').removeClass("active");
});
$(".loginhead").show();
$('.loginhead').click(function () {
$(".top .login").slideToggle();
$('.loginhead').addClass("active");
});
use toggleClass(). If I'm understanding you right. Here's a link to documentation: http://api.jquery.com/toggleClass/
$('.loginhead').toggleClass("active");