Mostrar y Ocultar un div

[sidereus]

Hola, me pregunta es la siguiente: tengo una página con varios 'div' al cargar todo están ocultos, con una función abro cada div especifico pero quiero que al abrir uno se cierren los demás, es decir que solo pueda abrir uno a la vez, como podría hacer esto?

la función que utilizo para mostrar y ocultarlos es la siguiente:


function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('servidormasviajes');/* "contenido_a_mostrar" es el nombre que le dimos al DIV */

}

la mando a llamar en el 'onclick' de los botones del menú.

[rjulio21]

Eso es javascript, no HTML.

pero bueno, si estas usando javascript puro lo que se me ocurre es que intentes capturar
los selectores por medio de una clase CSS que le hayas agregado, luego los recorras. apliques lo que deseas y despues de eso abras el tuyo.

Código Javascript:

objetos = document.getElementByClassName("tuClaseCSS");
//ocultas todo
for(i=0;i<objetos.length;++i){
    objetos[i].display=none;
 
}
//muestras el tuyo
 
document.getElementById(tuId).display=block;
 

[AngelKrak]

con este script puedes hacerlo ;) nomas modificalo por lo tuyo ;)

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#mostrar").click(function(){
$('#target').show(); //muestro mediante id
$('.target').show(); //muestro mediante clase
});
$("#ocultar").click(function(){
$('#target').hide(); //oculto mediante id
$('.target').hide(); //muestro mediante clase
});
});
</script>

[Nedned]

Pues fácil,
haces una función que recibe un parámetro diciendo cual se va a abrir, y ahora.

Haces click, llama a la función, se cierran todos, y se abre el que le has pasado por parámetro.
Y listo

[Alexis88]

Desde la hoja de estilos, oculta todos los <div> y crea una clase que hará visible al <div> al que se la apliques. Luego, cuando pulses cualquiera de los botones del menú, buscas al <div> que posea la clase, se la quitas y se la asignas al <div> que corresponda con la opción marcada.

Código HTML:

<nav>
    <li data-div = "a">Opción 1</li>
    <li data-div = "b">Opción 2</li>
    <li data-div = "c">Opción 3</li>
</nav>
 
<div id = "a">Contenido 1</div>
<div id = "b">Contenido 2</div>
<div id = "c">Contenido 3</div>
 

Código CSS:

div{
    display: none;
}
 
.visible{
    display: block;
}
 

Código Javascript:

var aux;
 
[].forEach.call(document.querySelectorAll("nav li"), function(li){
    li.addEventListener("click", function(){
        aux = document.querySelector(".visible");
        if (aux){
            aux.className = "";
        }
        document.querySelector("#" + this.dataset.div).className = "visible";
    }, false);
});
 

DEMO

No olvides colocar el código JavaScript luego del último elemento de tu documento HTML y justo antes de la etiqueta </body> para que surta efecto.

Saludos