How to Add Class to a Div using JQuery

Submitted by nurhodelta_17 on Friday, September 15, 2017 - 23:02.

In this tutorial, I'm going to show you how to add and remove class to a div using jQuery. I've created three buttons each assigned a jQuery function. To start with, be sure to include jQuery on your file in order for the code to work.

Creating our Sample

We create our sample by creating three styles with assigned class each. We name this as "index.php". To create this open your html editor and paste the code below.

<!DOCTYPE html>
<html lang = "en">
        <head>
                <meta charset="UTF-8" name="viewport" content="width-device=width, initial-scale=1" />
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
                <title>Add Class to a Div using JQuery</title>
        </head>
        <style>
                .blue{
                        color:blue;
                }
                .green{
                        color:green;
                }
                .red{
                        color:red;
                }
        
        </style>
<body>
        <div style="height:30px;"></div>
        <div class="row">       
                <div class="col-md-3">
                </div>
                <div class="col-md-6 well">
                        <div id="addclass">
                                Try changing my COLOR 
                        </div>
                        <br>
                        <button type="button" id="red" class="btn btn-danger"> Red</button> <button type="button" id="green" class="btn btn-success">Green</button> 
                        <button type="button" id="blue" class="btn btn-primary">Blue</button>
                </div>
                <div class="col-md-3">
                </div>
        </div>
</body>
<script src = "js/jquery-3.1.1.js"></script>    
<script src = "js/bootstrap.js"></script>
<script type = "text/javascript">
        $(document).ready(function(){
        
                $(document).on('click', '#blue', function(){
                        $('#addclass').removeClass('red');
                        $('#addclass').removeClass('green');
                        $('#addclass').addClass('blue');
                });
                
                $(document).on('click', '#red', function(){
                        $('#addclass').removeClass('blue');
                        $('#addclass').removeClass('green');
                        $('#addclass').addClass('red');
                });
                
                $(document).on('click', '#green', function(){
                        $('#addclass').removeClass('red');
                        $('#addclass').removeClass('blue');
                        $('#addclass').addClass('green');
                });
                
        });
</script>
</html>

That's it. Happy Coding :)

Add new comment

83 views