Home > Developer > JavaScript
<!doctype html>
<meta charset= "UTF-8" >
<title>tab</title>
<style type= "Text/css" >
* {padding:0; margin:0;}
button {
Background-color: #ccc;
width:80px;
height:30px;
}
. btn-active {
Background-color:yellow;
Font-weight:bold;
font-size:14px;
}
#dd div{
width:200px;
height:200px;
font-size:64px;
Background-color: #0c0;
Display:none;
Color: #fff;
}
#dd. div-active {
Display:block;
}
</style>
<body>
<button class= "btn-active" > button 1</button>
<button> Button 2</button>
<button> Button 3</button>
<button> Button 4</button>
<div id= "DD" >
<div class= "Div-active" >1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<script type= "Text/javascript" >
1. Get the element first
var buttonlist = document.getelementsbytagname ("button");
var divlist = document.getElementById ("dd"). getElementsByTagName ("div");
2. Add an Event
for (var i = 0; i < buttonlist.length; i++) {
Buttonlist[i].index = i;
Buttonlist[i].onclick = function () {
for (var j = 0; J < buttonlist.length;j++) {
Buttonlist[j].classname = "";
Divlist[j].classname = "";
or the following wording
Divlist[j].style.display = "None";
}
Buttonlist[this.index].classname = "Btn-active";
Divlist[this.index].classname = "Div-active";
or the following wording
Divlist[this.index].style.display = "block";
}
}
</script>
</body>
Javascript Simple Toggle Effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
