JavaScript点击设置背景颜色的选项卡代码
分类：实例代码
JavaScript点击设置背景颜色的选项卡代码属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享的实例代码也是一个选项卡，只不过能够设置背景颜色而已。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#red {
width:260px;
height:200px;
background:#FF0000;
display:none;
}
#green {
width:260px;
height:200px;
background:#00FF00;
display:none;
}
#yellow {
width:260px;
height:200px;
background:#FFFF00;
display:none;
}
#blue {
width:260px;
height:200px;
background:#0000FF;
display:none;
}
</style>
<script type="text/javascript">
window.onload=function() {
var btn=document.getElementsByTagName('input');
var div=document.getElementsByTagName('div');
for (var i=0;i<btn.length;i++) {
btn[i].index=i;
btn[i].onclick=function() {
for (var i=0;i<btn.length;i++) {
btn[i].style.background = '';
}
switch (this.value) {
case '红色':
this.style.background = '#FF0000';
break;
case '绿色':
this.style.background = '#00FF00';
break;
case '黄色':
this.style.background = '#FFFF00';
break;
case '蓝色':
this.style.background = '#0000FF';
break;
}
for (var i=0;i<btn.length;i++) {
div[i].style.display = '';
}
div[this.index].style.display = 'block';
}
}
};
</script>
</head>
<body>
<input type="button" id="btn1" value="红色" style="background-color: #FF0000" />
<input type="button" id="btn2" value="绿色" />
<input type="button" id="btn3" value="黄色" />
<input type="button" id="btn4" value="蓝色" />
<div id="red" style="display: block;"> </div>
<div id="green"> </div>
<div id="yellow"> </div>
<div id="blue"> </div>
</body>
</html>
JavaScript点击设置背景颜色的选项卡代码，这样的场景在实际项目中还是用的比较多的，关于JavaScript点击设置背景颜色的选项卡代码就介绍到这了。