Dynamically addClass CSS click using jQuery

Dynamically addClass CSS click using jQuery

Welcome to the In Pakainfo.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.

onclick add class remove class using jquery Example

<title>onclick add class remove class using jquery Example</title>


$(document).ready(function(){
    $("button").click(function(){
        $("div:first").addClass("myngclass");
    });
});


.myngclass {
    font-size: 180%;
    color: green;
}



<h1>jquery add remove class onclick</h1>
<div>onclick add class remove class</div>
<div>jquery onclick toggle class</div>
<button>jquery add css style</button>

Click Event After AddClass : jQuery addClass() Method

$('.top-image').load(function(){
    $(this).parents('.image-wrapper-load').removeClass('image-wrapper-top').addClass('image-logo-new');
});

Add active class to Li on click jquery – Example

##HTML##
<ul>
<li><a id="jquery-link" class="" href="#">jQuery</a></li>
<li><a id="php-link" href="#">PHP</a></li>
<li><a id="laravel-link" href="#">Laravel</a></li>
<li><a id="magento-link" href="#">Magento</a></li>
</ul>
##Script##
$('ul li a').click( function(){
    if ( $(this).hasClass('active') ) {
        $(this).removeClass('active');
    } else {
        $('li a.active').removeClass('active');
        $(this).addClass('active');    
    }
});
##Style##
a {
    transition:all 300ms;
    color:#green;
    background:#red;
}
.active {
    color:#875;
    background:#3D3D3D;
}

Example

Jquery Add active class to main menu : Script

$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});

Example

Pakainfo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Also Read This 👉   Top 10 Common PHP Job Interview Questions and Answers