Ayuda con Código

abigor66 · #1 (**permalink**) 06/06/2008, 19:10

Que más Foreros!
Quisiera saber si alguien me puede dar una mano con este código.

Código HTML:

<table cellpadding="0" cellspacing="0" border="0" width="260" align="center" class="style01">
  <tr>
    <td valign="top">
    
<!-- ********************************** inicio Tours ********************************** -->
<input type="radio" name="buscador" id="buscador" value="tour3" onClick="document.getElementById('tour0').style.display='none';document.getElementById('tour1').style.display='none';document.getElementById('tour2').style.display='none';">
<input type="radio" name="buscador" id="buscador" value="tour3" onClick="document.getElementById('tour0').style.display='';document.getElementById('tour1').style.display='';document.getElementById('tour2').style.display='';">
<!-- ********************************** fin Tours ********************************** -->
      Tour <br />

<!-- ********************************** inicio Planes ********************************** -->
<input type="radio" name="buscador" id="buscador" value="planes3" onClick="document.getElementById('planes0').style.display='none';document.getElementById('planes1').style.display='none';document.getElementById('planes2').style.display='none';">
<input type="radio" name="buscador" id="buscador" value="planes3" onClick="document.getElementById('planes0').style.display='';document.getElementById('planes1').style.display='';document.getElementById('planes2').style.display='';">
<!-- ********************************** fin Planes ********************************** -->
      Planes<br />
      </td>
  </tr>
  <tr>
    <td height="5" colspan="3"></td>
  </tr>
  <tr id="tour0" style="display:none;">
    <td height="23" class="celda27">
      <div align="left">Destino</div>
      <div align="center"><select name="destino" class="borde" id="destino"></select></div></td>
    <td height="23" class="celda27">
    <div align="left">Sector</div>
    <div align="center"><select name="sector" class="borde" id="sector"></select></div></td>
  </tr>
  <tr id="tour1" style="display:none;">
    <td width="130">&nbsp;</td>
    <td width="130">&nbsp;</td>
  </tr>
  <tr id="tour2" style="display:none;">
    <td height="23" class="celda27">
    <div align="justify">Lugar</div>
    <div align="center"><select name="lugar" class="borde" id="lugar"></select></div></td>
    <td height="23" class="celda27">
    <div align="justify">Actividad</div>
    <div align="center"><select name="actividad" class="borde" id="actividad"></select></div></td>
  </tr>
  <tr id="planes0" style="display:none;">
    <td height="23" class="celda27">
      <div align="left">Destino</div>
      <div align="center"><select name="destino" class="borde" id="destino"></select></div></td>
    <td height="23" class="celda27">
    <div align="left">Sector</div>
    <div align="center"><select name="sector" class="borde" id="sector"></select></div></td>
  </tr>
  <tr id="planes1" style="display:none;">
    <td width="130">&nbsp;</td>
    <td width="130">&nbsp;</td>
  </tr>
  <tr id="planes2" style="display:none;">
    <td height="23" class="celda27">
    <div align="justify">Lugar</div>
    <div align="center"><select name="lugar" class="borde" id="lugar"></select></div></td>
    <td height="23" class="celda27">
    <div align="justify">Actividad</div>
    <div align="center"><select name="actividad" class="borde" id="actividad"></select></div></td>
  </tr>
  <tr>
    <td height="40" colspan="3" class="enlace16"><div align="right"> <a class="enlace16" href="#" onclick="document.forms.emisivo.submit();return false">Buscar &raquo;</a> </div></td>
  </tr>
</table>

la idea es quecuando seleccione una de las opciones (planes o tour) aparezca solo la info de lo que seleccione, no ambas

creo que seria algo como activar el radio que ocyulta la info al ser seleccionado otra opción.

Espero me puedan hechar una mano.

Gracias de antemano

abigor66 · #2 (**permalink**) 06/06/2008, 20:03

Solucionado, me pa¡saron un mejor codigo

Código HTML:

<html>
<head>
<!--
Simplemente debes hacer un bucle y hacer coincidir (de alguna manera) el valor del radio y la capa...
-->
<script>
var capas = ["capa1", "capa2", "capa3", "capa4", "capa5"];
function mostrar(capa) {
for (i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = (capas[i] == capa) ? "block":"none";
}
</script>
</head>
<body>

<p>
En este caso las capas deben tener el id como el array capas y el value de los radios el mismo nombre, y en cada radio debes poner onclick="mostrar(this.value)"
</p>
<form>
<input type="radio" name="r" value="capa1" onclick="mostrar(this.value)" />
<input type="radio" name="r" value="capa2" onclick="mostrar(this.value)" />
<input type="radio" name="r" value="capa3" onclick="mostrar(this.value)" />
<input type="radio" name="r" value="capa4" onclick="mostrar(this.value)" />
<input type="radio" name="r" value="capa5" onclick="mostrar(this.value)" />
</form>
<div id="capa1" style="display: none">capa 1</div>
<div id="capa2" style="display: none">capa 2</div>
<div id="capa3" style="display: none">capa 3</div>
<div id="capa4" style="display: none">capa 4</div>
<div id="capa5" style="display: none">capa 5</div>
</body>
</head>

Gracias de todas maneras por su tiempo