How to addClass and remove Class when clicking a link? - javascript

I'm trying to make some elements active when I click on a link. I'm at this code right now which let's me add and remove active class when I click on element with class 'test'. What I need is to click a link and have the same behaviour to the div elements.
I have:
$('.test').on('click',function(){
$('.test.active').removeClass('active');
$(this).addClass('active');
});
.active{
color: #F00;
}
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href=''>Click me</a>
This code adds and removes the active class when I click the divs. How to do the same thing by clicking the link?

When you click a link, the behavior and the method will be the same as if you click a button, a div, or any other element of the page.
The difference is that an <a> element will redirect you to another page (inclusive if it's "the same" where you come from) and the changes won't be noticeable.
You will need to use $("element").addClass("class");

Add href="javascript:;" if to avoid redirection.
In jQuery below snippet will work:
$('.link').on('click', function(){
$(this).toggleClass('active');
})
Working Fiddle
Update
To highlight multiple divs
$('.link').on('click', function(){
if($('.test.active').next().hasClass('test'))
{
$('.test.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.test.active').removeClass('active');
$('.test:first').addClass('active');
}
})
Updated Fiddle

Your code should be:
$('.link').on('click', function () {
var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
$('.test.active').add($nextActive).toggleClass('active');
return false;
});

You can do like following. It will add and remove active class on link click.
$('.link').on('click', function(){
$('.active').removeClass('active').siblings('.test').addClass('active');
});
.active{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href='#'>Click me</a>
Edit:
This will work for infinite div.
JQuery:
$('.link').on('click', function(){
if($('.active').next().hasClass('test'))
{
$('.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.active').removeClass('active');
$('.test:first').addClass('active');
}
});
Fiddle

Just remove .active class.
below code is working.
$('.test').click(function(){
$('.test').removeClass('active');
$(this).addClass('active');
});

replace js function
$('.test').on('click',function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
Demo Link https://jsfiddle.net/ffjcfb2b/

According to your post and comments you'd like to use link as class changer for divs. Here you go. Edited!
$('.link').on('click', function(){
$('.test.active').toggleClass('active').next().addClass("active");
});
Working fiddle

Related

Change span on click Jquery

I've this code
$('a').click(function() {
$('a span').first().addClass('hide');
$('a span:nth-child(2)').removeClass('hide');
$('a span:nth-child(2)').addClass('display');
});
.hide {
display:none;
}
.display {
display:block;
}
<a href="#">
<span>Hello</span>
<br>
<span class="hide">World</span>
</a>
When I click on the link I want the first span hide and the 2nd span appears.
I want to do it multiple times (click on this link multiples times and have the same result).
I try to do it with this Jquery code
I would just toggle the classes
and you have to prevent the default on the link so it doesn't try to leave the page.
$('a').click(function(e) {
e.preventDefault();
$('a span').toggleClass('hide show');
});
here is a work demo
I would do something like this. Loop through the children of the a and swap their classes. Doing this method allows you to do other things as well as just toggle the class like adding text/css attributes to the span's.
$('a').click(function() {
$(this).children().each(function(index, element)
{
if ($(this).hasClass('hide'))
{
$(this).removeClass('hide');
$(this).addClass('display');
}
else
{
$(this).removeClass('display');
$(this).addClass('hide');
}
});
});
Here is a JS Fiddle of the code above
This should do what you are looking for:
HTML:
<a class='hide-clicker' href="#">
<span>Hello</span>
<span class="hide">World</span>
</a>
jquery:
$("a.hide-clicker").click(function(e) {
e.preventDefault();
$(this).find('span').toggleClass('hide');
});
CSS:
.hide {
display:none;
}

jquery selected link activate but different div

I want to activate selected link with jquery. But my links are grouped with css classes in different divs.
<div class="menu-container">
<div class="button-group">
clients
supplier
</div>
<div class="button-group">
supplier
</div>
</div>
Jquery is like this.
$('div.menu-container').on('click','.button-group > a', function(){
$(this).addClass('active').siblings('a').removeClass('active');
})
I want to change selected link to active css class and others not. But my button-group is separating a tags. So two a link is appearing as active.
working app jsfiddle is here.
You are removing the active class only for siblings element. Simply remove the active class for all anchor element like below. Update your script like below.
$('div.menu-container').on('click','.button-group > a', function(){
$('.button-group > a').removeClass('active');
$(this).addClass('active');
})
DEMO
EDIT:
According to your new requirement if I click the second time to active link, it should be deactive, update your jquery like below.
$('div.menu-container').on('click','.button-group > a', function(){
if($(this).hasClass('active'))
{
$(this).removeClass('active');
}
else
{
$('.button-group > a').removeClass('active');
$(this).addClass('active');
}
});
DEMO
you need to go further upwards to reach them, try this:
$('div.menu-container').on('click','.button-group > a', function(){
$(this).closest('.menu-container').find('a.active').removeClass('active');
$(this).addClass('active');
});
Try this : remove active class from all anchor links present under .menu-container and then apply 'active' class to current clicked element.
$('div.menu-container').on('click','.button-group > a', function(){
$('div.menu-container').find('.active').removeClass('active');
$(this).addClass('active');
});
Demo
Try like this:::
$(document).ready(function(){
$("a[id ^= 'menu']").on('click',function(){
$("a[id ^= 'menu']").removeClass('active');
$(this).addClass('active')
})
})
DEMO
please see solution,
$('div.menu-container').on('click','.button-group > a', function(){
$('div.menu-container').find('a.active').removeClass('active');
$(this).addClass('active');
})

Why can't I add class to this html element?

I'm trying to add this the active class to the element when the user clicks it. Why does it not work? Is there something wrong with the syntax?
HTML code:
<div class="accordion">
<h3>a</h3>
<p class="active">b</p>
<h3>a</h3>
<p>b</p>
<h3>b</h3>
<p>b</p>
<h3>b</h3>
<p>b</p>
</div>
jQuery code:
jQuery(function($) {
$('div.accordion').click(function(e) {
e.preventDefault();
$(this).addClass("active");
});
});
What i wanna do is when the user clicks h3, thats when it sets the p tag below it the active class
You need to bind click event to H3 elements. Also make sure you remove previously active elements:
var $h3 = $('.accordion > h3').click(function(e) {
e.preventDefault();
$h3.next('p').removeClass('active');
$(this).next('p').addClass('active');
});
Demo: http://jsfiddle.net/2DB37/
I'm trying to add the active class to the p tag.
You forgot to add a click event to the p tag:
jQuery(function($) {
$('div.accordion h3').click(function(e) {
e.preventDefault();
$(this).next('p').addClass("active");
});
});
WORKING DEMO
change jQuery to like this
jQuery(function($) {
$('div.accordion p').click(function(e) {
e.preventDefault();
$(this).addClass("active");
});
});
UPDATED DEMO
jQuery(function($) {
$('div.accordion h3').click(function(e) {
e.preventDefault();
$(this).next().addClass("active");
});
});

JQuery Remove all links inside a <div> that have a particular class except for the one that's clicked

In jQuery, how can I remove/disable or change the class of all links inside a <div> that have a particular class except for the one that was clicked? The clicked one's class needs to be changed.
<div class="test">
<div class="link" data-id="1">Link 1</div>
<div class="link" data-id="2">Link 2</div>
<div class="link" data-id="3">Link 3</div>
</div>
In this case, if I clicked Link 1, I'm trying to make Link 2 and Link 3 disappear or change their class, and change the class of Link 1 to noLink.
How can this be done. I'm familiar with add class, remove class, but I'm stuck with getting all others to be removed or changed and change the clicked one to another class.
Something like this?
$('.test div').on('click', function () {
$(this).removeClass('link')
.addClass('noLink')
.siblings('.link')
.remove();
});
DEMO
If you want to change color of clicked link then you can use following code
$('.test .link').on('click',function(){
$('.test .link').css('background', '#38a2de');
$(this).css('background', '#333333');
});
demo
$('.link').on('click', function() {
$('.link').addClass('hide');
$(this).attr('class', 'no-link');
});
Fiddle: http://jsfiddle.net/R3586/
$('.test .link').click(function() {
$(this).removeClass('link').addClass('noLink');
$('.link').remove();
})
This does the trick:
<script>
$('.test .link').click(function(){
$('.test .link').hide();
$(this).addClass('noLink').show();
});
</script>
$('.link').click(function(){
$(this).addClass('noLink').removeClass('link').siblings().hide();
});
$('.link').click(function(){
$(this).removeClass('link').addClass('nolink');
$('.link').remove()
});

closing element opened by toggle() function

How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.
You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin
Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});
Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});
Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);

Categories

Resources