Mostrar/ocultar div con jquery

[kevinmaximo]

Hola ,
Estoy haciendo un menu y con el mismo id quiero mostrar y ocultar el div , y no me funciona , si alguien me puede ayudar

esto es el menu

<div id="contenedormenu">
<ul id="menu" class="content">
<li><a href="#" id="op1">Home</a></li>
<li><a href="#" id"op2">Practice</a></li>
<li><a href="#" id"op3">Attorneys</a></li>
<li><a href="#" id"op4">Accidents</a></li>
<li><a href="#" id"op5">News</a></li>
<li><a href="#" id"op6">About Us</a></li>
<li><a href="#" id"op7">Contact Us</a></li>
</ul>
</div>

y este es el jquery ,

$(document).ready(menu);


function menu(){

$("#contenedorinicio").show();


menu();
$("#op1").click(opcion1);
}

function opcion1() {
$("#contenedorinicio").show();
$("#contenedorimagenes").hide ();
}

lo que pretendo es que a la hora de darle click en home , de inmediato muestre su respectivo div y oculte todos los demas , Pero no me esta funcionando

Si alguien sabe alguna otra forma de hacerlo se lo agradeceria enormemente , ya que es algo que tengo que entregar urgentemente , Algun link o algo de ayuda porfavor , Muchas gracias

[cristian_cena]

Prueba con esto:

Código HTML:

​<div id="contenedormenu">
    <ul id="menu" class="content">
        <li><a href="#" rel="oop1">Home</a></li>
        <li><a href="#" rel="oop2">Practice</a></li>
        <li><a href="#" rel="oop3">Attorneys</a></li>
    </ul>
</div>
 
<div id="oop1" class="contenidos"> ... uno ... </div> 
<div id="oop2" class="contenidos"> ... dos... </div> 
<div id="oop3" class="contenidos"> ... tres ... </div>
 

Código CSS:

#menu li a{
    color:blue;
}
.contenidos{
    display:none;
    margin:10px; 
    padding: 10px;
    border:1px solid gray;
}
 
/*activos por defecto*/
#menu li:first-child a{
    color:red;
}
#oop1{
    display:block;
}
 

​

Código Javascript:

​
$(document).ready(function(){
   
    $("#menu li a").click(function(e){
        e.preventDefault();
        var id = "#" + $(this).attr("rel");
        //item activo
        $("#menu li a").css({"color":"blue"});             
        $(this).css({"color":"red"});             
        //contenido activo
        $(".contenidos").hide();
        $(id).show();
    });
    
});
​
 

Pedir algo urgentemente es de mal gusto, pues acá las ayudas son gratuitas.
Suerte :)

[kevinmaximo]

Hola ,

Muchas gracias por tu respuesta ,

Pero no podría hacer esto por que el li de css lo tengo activo para el menu desplegable así que tengo que hacerlo necesariamente que Jquery el esconder/mostrar los divs , Sabes algún ejemplo o alguna forma de hacerlo ,
en el codigo que tengo hay algún error o algo que no me lo deja hacer no se que sera porque en casos paginas anteriores con la misma formula me funcionaba pero ahora no ,

Te agradesco mucho tu ayuda .
:)

[cristian_cena]

Iniciado por kevinmaximo

no podría hacer esto por que el li de css lo tengo activo para el menu desplegable

no te impide nada, solo deberías quitar esto del css:

Código CSS:

#menu li a{
    color:blue;
}
#menu li:first-child a{
    color:red;
}
 

y quitar del código javascript lo siguiente:

Código Javascript:

//item activo
$("#menu li a").css({"color":"blue"});             
$(this).css({"color":"red"});
 

Iniciado por kevinmaximo

así que tengo que hacerlo necesariamente que Jquery el esconder/mostrar los divs ,

lo hicimos funcionar y con jquery.

Iniciado por kevinmaximo

Sabes algún ejemplo o alguna forma de hacerlo

Es broma no?

Iniciado por kevinmaximo

en el codigo que tengo hay algún error

no muestras tu css y el html esta incompleto.
El origen de una buena respuesta es una buena pregunta.

suerte.