效果:
代码:
复制代码代码如下:
<head runat="servidor">
<título></título>
<style type="texto/css">
#vermelho
{
largura: 260px;
altura: 200px;
plano de fundo: #FF0000;
exibição: nenhum;
}
#verde
{
largura: 260px;
altura: 200px;
plano de fundo: #00FF00;
exibição: nenhum;
}
#amarelo
{
largura: 260px;
altura: 200px;
plano de fundo: #FFFF00;
exibição: nenhum;
}
#azul
{
largura: 260px;
altura: 200px;
plano de fundo: #0000FF;
exibição: nenhum;
}
</estilo>
<script type="texto/javascript">
janela.onload=função(){
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=função(){
for (var i = 0; i < btn.length; i++) {
btn[i].style.background = '';
}
mudar (este.valor) {
case '红色': this.style.background = '#FF0000';
quebrar;
case '绿色': this.style.background = '#00FF00';
quebrar;
case '黄色': this.style.background = '#FFFF00';
quebrar;
case '蓝色': this.style.background = '#0000FF';
quebrar;
}
for (var i = 0; i < btn.length; i++) {
div[i].style.display = '';
}
div[this.index].style.display = 'bloco';
}
}
};
</script>
</head>
<corpo>
<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="vermelho" style="display: bloco;">
</div>
<div id="verde">
</div>
<div id="amarelo">
</div>
<div id="azul">
</div>
</body>