1<!DOCTYPE html>
2<html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <style>
6 .active {
7 padding: 5px;
8 background-color: #20BF55;
9 color: white;
10 }
11 </style>
12 </head>
13 <body>
14 <div id="text" onclick="makeActive()">
15 Click to make Active
16 </div>
17 <script>
18 function makeActive() {
19 var element = document.getElementById("text");
20 element.classList.add("active");
21 element.innerHTML="This is Active";
22 }
23 </script>
24 </body>
25</html>
26
1<script>
2 function func(){
3 document.getElementById('div').classList.add('active');
4 }
5</script>
6
7<button onclick='func()'>Click</button>
8<div id="div">
9 This element gets 'active' class.
10</div>
1 jQuery(function($) {
2 var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
3 $('ul a').each(function() {
4 if (this.href === path) {
5 $(this).addClass('active');
6 }
7 });
8 });