效果:
Ejemplo:
复制代码代码如下:
<head runat="servidor">
<título></título>
<tipo de estilo="texto/css">
#rojo
{
ancho: 260 px;
altura: 200 píxeles;
fondo: #FF0000;
pantalla: ninguna;
}
#verde
{
ancho: 260 px;
altura: 200 píxeles;
fondo: #00FF00;
pantalla: ninguna;
}
#amarillo
{
ancho: 260 px;
altura: 200 píxeles;
fondo: #FFFF00;
pantalla: ninguna;
}
#azul
{
ancho: 260 px;
altura: 200 píxeles;
fondo: #0000FF;
pantalla: ninguna;
}
</estilo>
<tipo de script="texto/javascript">
ventana.onload = función () {
var btn = document.getElementsByTagName('entrada');
var div = document.getElementsByTagName('div');
for (var i = 0; i < btn.length; i++) {
btn[i].índice = i;
btn[i].onclick = función () {
for (var i = 0; i < btn.length; i++) {
btn[i].estilo.fondo = '';
}
cambiar (este.valor) {
caso '红色': this.style.background = '#FF0000';
romper;
caso '绿色': this.style.background = '#00FF00';
romper;
caso '黄色': this.style.background = '#FFFF00';
romper;
caso '蓝色': this.style.background = '#0000FF';
romper;
}
for (var i = 0; i < btn.length; i++) {
div[i].style.display = '';
}
div[this.index].style.display = 'bloque';
}
}
};
</script>
</cabeza>
<cuerpo>
<tipo de entrada="botón" id="btn1" valor="红色" estilo="color de fondo: #FF0000" />
<tipo de entrada="botón" id="btn2" valor="绿色" />
<tipo de entrada="botón" id="btn3" valor="黄色" />
<tipo de entrada="botón" id="btn4" valor="蓝色" />
<div id="rojo" estilo="display: bloque;">
</div>
<div id="verde">
</div>
<div id="amarillo">
</div>
<div id="azul">
</div>
</cuerpo>