效果：
代碼：
複製程式碼如下：
<頭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>
</正文>