效果：
代码：
复制代码代码如下：
<头runat =“服务器”>
<标题></标题>
<样式类型=“文本/css”>
＃红色的
{
宽度：260 像素；
高度：200px；
背景：#FF0000；
显示：无；
}
＃绿色的
{
宽度：260 像素；
高度：200px；
背景：#00FF00；
显示：无；
}
＃黄色的
{
宽度：260 像素；
高度：200px；
背景：#FFFF00；
显示：无；
}
＃蓝色的
{
宽度：260 像素；
高度：200px；
背景：#0000FF；
显示：无；
}
</风格>
<脚本类型=“文本/javascript”>
window.onload = 函数() {
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 = 函数 () {
for (var i = 0; i < btn.length; i++) {
btn[i].style.background = '';
}
switch (this.value) {
case '红色': this.style.background = '#FF0000';
休息;
case '绿色': this.style.background = '#00FF00';
休息;
case '黄色': this.style.background = '#FFFF00';
休息;
case '蓝色': this.style.background = '#0000FF';
休息;
}
for (var i = 0; i < btn.length; i++) {
div[i].style.display = '';
}
div[this.index].style.display = '块';
}
}
};
</脚本>
</头>
<正文>
<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="绿色">
</div>
<div id="黄色">
</div>
<div id="蓝色">
</div>
</正文>