Foros del Web - Ver Mensaje Individual

Naahuel · #4 (**permalink**) 16/09/2011, 11:22

No! No hace falta que repitas eso 4 veces! Como te lo pasé yo tiene que funcionar perfectamente. el_activo es una variable que almacena el valor que se ha pasado luego del # en el url. Entonces busca el elemento que coincide con esa clase.

El problema está en algo que no te he especificado :P El asunto es que estamos asignándole la clase después de haber cargado el menú. Entonces no va a funcionar. Para que funcione asegurate de poner el script que detecta la clase antes del script del menu.

Mirá: http://nahueljose.com.ar/temp-demo-acordeon/

Si hacés click sobre cada sección, en la próxima aparecen abiertos. Página 1:

Código HTML:

Ver original<html>
<body>
    <p><a href="pagina2.html#weblog-tools">Weblog Tools</a></p>
    <p><a href="pagina2.html#programming-languages">Programming Languages</a></p>
    <p><a href="pagina2.html#cool-stuff">Cool Stuff</a></p>
    <p><a href="pagina2.html#search-engines">Search Engines</a></p>
</body>
</html>

Página 2:

Código HTML:

Ver original<!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" dir="ltr" lang="en-EN">
<head>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script>
        $(function(){
            //analizar hash
            var el_activo = location.hash ? location.hash.split('#')[1] : false;
            if(el_activo){
                $('li.' + el_activo).addClass('expand');
            }
        });
    </script>
    <script src="menu.js" type="text/javascript"></script>
</head>
<body>
    <h2>2: Accordion with first submenu expanded at page load</h2>
 
    <ul class="menu">
        <li class="weblog-tools">
            <a href="#">Weblog Tools</a>
            <ul class="acitem">
                <li><a href="http://www.pivotx.net/">PivotX</a></li>
                <li><a href="http://www.wordpress.org/">WordPress</a></li>
                <li><a href="http://www.textpattern.com/">Textpattern</a></li>
                <li><a href="http://typosphere.org/">Typo</a></li>
            </ul>
        </li>
        <li class="programming-languages">
            <a href="#">Programming Languages</a>
            <ul class="acitem">
                <li><a href="http://www.php.net/">PHP</a></li>
                <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
                <li><a href="http://www.python.org/">Python</a></li>
                <li><a href="http://www.perl.org/">PERL</a></li>
                <li><a href="http://java.sun.com/">Java</a></li>
                <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
            </ul>
        </li>
        <li><a href="http://www.i-marco.nl/weblog/">Marco's blog (no submenu)</a></li>
        <li class="cool-stuff">
            <a href="#">Cool Stuff</a>
            <ul class="acitem">
                <li><a href="http://bookalicio.us/">Bookalicious</a></li>
                <li><a href="http://www.apple.com/">Apple</a></li>
                <li><a href="http://www.nikon.com/">Nikon</a></li>
                <li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
                <li><a href="http://www.nintendo.com/">Nintendo</a></li>
            </ul>
        </li>
        <li class="search-engines">
            <a href="#">Search Engines</a>
            <ul class="acitem">
                <li><a href="http://search.yahoo.com/">Yahoo!</a></li>
                <li><a href="http://www.google.com/">Google</a></li>
                <li><a href="http://www.ask.com/">Ask.com</a></li>
                <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>