답:
代码:
复代码代码如下:
<head runat="서버">
<제목></제목>
<스타일 유형="텍스트/css">
#빨간색
{
너비: 260px;
높이: 200px;
배경: #FF0000;
디스플레이: 없음;
}
#녹색
{
너비: 260px;
높이: 200px;
배경: #00FF00;
디스플레이: 없음;
}
#노란색
{
너비: 260px;
높이: 200px;
배경: #FFFF00;
디스플레이: 없음;
}
#파란색
{
너비: 260px;
높이: 200px;
배경: #0000FF;
디스플레이: 없음;
}
</style>
<스크립트 유형="텍스트/자바스크립트">
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 = '';
}
스위치(this.value) {
케이스 '색상': this.style.Background = '#FF0000';
부서지다;
Case '색상': this.style.Background = '#00FF00';
부서지다;
케이스 '황색': this.style.Background = '#FFFF00';
부서지다;
case '蓝color': this.style.Background = '#0000FF';
부서지다;
}
for (var i = 0; i < btn.length; i++) {
div[i].style.display = '';
}
div[this.index].style.display = '블록';
}
}
};
</script>
</head>
<본문>
<input type="button" id="btn1" value="红color" style="Background-color: #FF0000" />
<input type="button" id="btn2" value="绿color" />
<input type="button" id="btn3" value="黄color" />
<input type="button" id="btn4" value="蓝color" />
<div id="red" 스타일="표시: 블록;">
</div>
<div id="녹색">
</div>
<div id="노란색">
</div>
<div id="파란색">
</div>
</body>