How To Set Active Class In Javascript
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>
<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:
2 comments
commentsTHANK YOU SO MUCH!
Replyyou welcome :)
Reply