Javascript Add Active Class To A DIV

How To Set Active Class In Javascript  

javascript set active class


In This Javascript Tutorial we will See How To Add A Class To an HTML element And Delete the class From Other Elements On Element Click using JS And Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript: Element Siblings</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .parent{overflow: hidden;margin-top:50px;}
            
            .child{width:200px;height: 150px;float: left;margin-left:20px;border:1px solid #000;
                   text-align:center;line-height:150px;cursor: pointer;background-color:#ddd;}
            
            .bak{ background-color: red; color: #fff; font-weight:bold; }
            
        </style>
        
    </head>
    <body>
        
        <div class="parent">
            <div class="child">DIV1</div>
            <div class="child">DIV2</div>
            <div class="child">DIV3</div>
            <div class="child">DIV4</div>
            <div class="child">DIV5</div>
        </div>
        
        <script>
            
            var elements = document.getElementsByClassName("child");
            for(var i = 0; i < elements.length; i++)
            {
                elements[i].onclick = function(){
                    
                    // remove class from sibling
                    
                    var el = elements[0];
                    while(el)
                    {
                        if(el.tagName === "DIV"){
                            //remove class
                            el.classList.remove("bak");
                            
                        }
                        // pass to the new sibling
                        el = el.nextSibling;
                    }
                    
                  this.classList.add("bak");  
                };
            }
            
        </script>    
        
    </body>
</html>


OUTPUT:


Javascript Set Active Class To An Element




Share this

Related Posts

Previous
Next Post »

2 comments

comments