Foros del Web - Ver Mensaje Individual

Dany_s · #4 (**permalink**) 07/02/2011, 09:14

evitá condicionales porque imaginate si tenes 10 item se te va a ser largo y otra es que si agregas mas item al html vas a tener que agregar al js también

podes relacionar el id de cada item con una clase de la sección

item #id1
con
sección .id1

otra sería obtener el índice al hacer click en un item, obtenes el íindice del li clickeado y mostrar el ul que tenga ese indice asi te desligas de agregar clase para conectar, aunque vas a estar obligado a respetar el orden

este ejemplo relaciono el id del li con una clase del ul

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script>
    $(function() {
        $('.menu-h1 a').click( function(){
            $('.secciones ul').hide();
            seccion = $(this).attr('id');
            $('.secciones ul.'+seccion).show();
            return false;
        });
    });
        </script>
    </head>
    <style>
        .secciones ul{display:none;}
    </style>
    <body>
        
        <ul class="menu-h1">
            <li><a href="" id="id1">ID 1</a></li>
            <li><a href="" id="id2">ID 2</a></li>
        </ul>
 
        <div class="secciones">
            <ul class="id1">
                <li>1.1</li>
                <li>1.2</li>
            </ul>
            <ul class="id2">
                <li>2.1</li>
                <li>2.2</li>
            </ul>
        </div>
 
    </body>
</html>

si querés agregar otros item
<li><a href="" id="id3">ID 2</a></li>
fijate que tiene #id3
entonces para agregar la sección que pertenece a ese item agregas el ul con la clase igual que el id del item
<ul class="id3">
<li>3.1</li>
<li>3.2</li>
</ul>

y solo modificas el html