Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
How to add class in jquery in Jquery functions of JQuery Examples
2599 Views
Note 
addClass() function used to add the class dynamically to the elements.
Example: 1 when you click first element class added to the second element.

Related Topic:


removeClass() function used to remove the class dynamically to the elements.
Example: 2 When you click first element the class removed from the second element.
Example: 1 when you click first element class added to the second element
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".one").click(function () {
                $(".two").addClass('selected');
            });
        });
    </script>
    <style>
        .selected {
            color: red;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="one">click here to add class name 'selected' with next element</div>
    <div class="two">After click the element the selected class css applied here</div>
</body>

</html>
Example: 2 When you click first element the class removed from the second element
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".one").click(function () {
                $(".two").removeClass('selected');
            });
        });
    </script>
    <style>
        .selected {
            color: red;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="one">click here to add class name 'selected' with next element</div>
    <div class="two selected">After click the element the selected class css applied here</div>
</body>

</html>
Example: 1 Demo 
Example: 2 Demo 
Next Topics
Next lessons of current book.
Best Lessons of "JQuery Examples"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details