Hola que tal?
estoy haciendo un menu con diferentes items donde al hacer click en cada uno se muestra un contenido.funciona bien peroo:
1) el problema es cuando hago click en la 2da opcion me sigue mostrando el primero
2)La idea es que al hacer click en cualquiera de las opciones solo muestre el que corresponde al click y se borre el anterior.
Mi codigo es este.
Código:
<head>
<style type="text/css">
#contenido1{
display: none;
}
#contenido2{
display: none;
}
#contenido3{
display: none;
}
#contenido4{
display: none;
}
</style>
<script type="text/javascript">
function expandir(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display = "block"
}
return false
} else {
return true
}
}
</script>
</head>
y el html
Código:
<ul>
<li><a href="/"onclick="return expandir('contenido1');">contenido1</a></li>
<li><a href="/contenido2/" onclick="return expandir('contenido2');">contenido2</a></li>
<li><a href="/contenido3/" onclick="return expandir('contenido3');">contenido 3</a></li>
<li><a href="/contenido4/" onclick="return expandir('contenido4');">contenido 4</a></li>
</ul>
<div id="contenido1">
Contenido 1
</div>
<div id="contenido2">
contenido 2
</div>
<div id="contenido3">
contenido 3
</div>
<div id="contenido4">
contenido 4
</div>