html5 Archives - Ebhor.com

Add active class onclick javascript and jQuery

December 5, 2023December 5, 2023 by manish

Add active class to a div on javascript onclick event Here we are applying a style to a simple div. Steps to add a css class on click event

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .active {
            padding: 5px;
            background-color: #20BF55;
            color: white;
            }
        </style>
    </head>
    <body>
        <div id="text" onclick="makeActive()">
            Click to make Active
        </div>
        <script>
            function makeActive() {
               var element = document.getElementById("text");
               element.classList.add("active");
               element.innerHTML="This is Active";
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.active {

padding: 5px;

background-color: #20BF55;

color: white;

}

</style>

</head>

<body>

Click to make Active

</div>

function makeActive() {

var element = document.getElementById("text");

element.classList.add("active");

element.innerHTML="This is Active";

}

</script>

</body>

</html>

Add active class onclick javascript to HTML ul List to make menu Here We have ul list elements to create horizontal menu on click on … Read more

HTML5 Document Structure

June 11, 2022June 11, 2022 by manish

HTML5 Document Structure General HTML 5 Document Structure is as below

<!DOCTYPE html>
<html lang="en">
   <head>
         ...
   </head>
   <body>
      .......
   </body>
 </html>