Miren estoy haciendo una pagina y necesito cierta funcionalidad con los divs.
Para no subir la pagina original,arme esta pagina sencilla para que se les haga mas facil evaluar mi problema.
Lo que deberia hacer esta pagina seria
a)si presiono en muestra frutas muestra el div que contiene todas las frutas
b)si presiono muestra verduras muestra el div que contiene todas las verduras
c)si presiono el primer select y elijo una de las opciones de las verduras ,aparece el div que contiene esa verdura especifica
d) si presiono el segundo select y elijo selecciono y muestro el div de la fruta especifica.
e)si presiono nuevamente los links se muestra todas las frutas o todas las verduras
Me faltarian los ultimos tres puntos,soy nuevo con el tema de javascript.Si podrian darme una mano me ayudarian demasiado y sepan que ayudaria en el foro a todo aquel que lo necesite
Aqui abajo dejo el codigo
Muchas gracias!
Código:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>colores</title>
<script type="text/javascript">
<!--
function cambia(id) {
var combo = document.getElementById(id);/**devuelve selects a 0*/
combo.selectedIndex = 0;
}
function muestraprinc()<!--cuando carga la pagina,no se ven las verduras-->
{
document.getElementById("verd" ).style.display='none';
}
function muestrafrutas()<!--al resionar el link se ven todas las frutas-->
{
document.getElementById("frut").style.display = '';
document.getElementById("verd").style.display = 'none' ;
}
function muestraverduras()<!-- al presion el link se ven todas las verduras -->
{
document.getElementById("verd").style.display = '' ;
document.getElementById("frut").style.display='none';
}
</script>
</head>
<body onload="javascript:muestraprinc();">
<a href="javascript:muestraverduras();">muestraverduras</a>
<a href="javascript:muestrafrutas();">muestrafrutas</a>
<!-- selectores de frutas o verduras individuales -->
<select id="fru_selec">
<option>Frutilla</option>
<option>Sandia</option>
</select>
<select id="ver_selec">
<option>Choclo</option>
<option>Lechuga</option>
</select>
<div><!--div contenedor-->
<div id="frut"><!-- div frutas -->
soy las frutas
<div id="f1">
Frutilla
</div>
<div id="f2">
Sandia
</div>
</div>
<div id="verd"><!-- div verduras -->
soy las verduras
<div id="v1">
Choclo
</div>
<div id="v2">
Lechuga
</div>
</div>
</div>
</body>
</html>
