jQuery addClass Method
home
Run
screen_rotation
fullscreen
cloud_download
navigate_before
<!DOCTYPE html> <html> <head> <title>jQuery Demo example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $( "#addClassExample" ).on( "click", function(event) { $("ul li").addClass(function(index,currentClass){ var addclass; if(currentClass == 'myClass'){ addclass = 'yellowBg'; } return addclass; }); }); }); </script> <style> div{ margin:10px; min-height:50px; min-width:100%; border:1px solid blue; float:left; } .myClass{ border:1px solid red; background:green; } .yellowBg{ background:yellow; } </style> </head> <body> <h4 ><a href="javascript:void(0);" id="addClassExample">Click to run .addClass() Example </a></h4> <ul> <li class="myClass"> One</li> <li>Two</li> <li class="myClass">Three</li> <li>Four</li> <li class="myClass">Five</li> <li>Six</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <title>jQuery Demo example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $( "#addClassExample" ).on( "click", function(event) { $("ul li").addClass(function(index,currentClass){ var addclass; if(currentClass == 'myClass'){ addclass = 'yellowBg'; } return addclass; }); }); }); </script> <style> div{ margin:10px; min-height:50px; min-width:100%; border:1px solid blue; float:left; } .myClass{ border:1px solid red; background:green; } .yellowBg{ background:yellow; } </style> </head> <body> <h4 ><a href="javascript:void(0);" id="addClassExample">Click to run .addClass() Example </a></h4> <ul> <li class="myClass"> One</li> <li>Two</li> <li class="myClass">Three</li> <li>Four</li> <li class="myClass">Five</li> <li>Six</li> </ul> </body> </html>
Copyrights@tutorialsplane.com