Home » Dynamically addClass CSS click using jQuery

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

Read Also:  jQuery Dynamically addClass and removeClass

Jquery Add active class to main menu : Script

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

Example


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Angular DataTable Pagination Searching Sorting in PHP
  2. Read Also:  Angular 8 Material Table Filter Sorting Paging
  3. Read Also:  PHP Login logout example with session
  4. Read Also:  Laravel 6 Inserting & Updating Eloquent Models
  5. Read Also:  Laravel Aggregate Object and Debugging eloquent methods
  6. Read Also:  WordPress plugin dependencies on Activation
  7. Read Also:  jQuery Image slider with Next Button
  8. Read Also:  Angular check ngIf Array is Empty/isset/Null
  9. Read Also:  IMPLODE() AND EXPLODE() FUNCTION IN PHP
  10. Read Also:  pagination in php using ajax

Leave a Comment

Your email address will not be published. Required fields are marked *