Ver Mensaje Individual
  #4 (permalink)  
Antiguo 16/09/2011, 11:22
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 9 meses
Puntos: 192
Respuesta: Mostrar ocultar paneles jQuerry

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
  1.     <p><a href="pagina2.html#weblog-tools">Weblog Tools</a></p>
  2.     <p><a href="pagina2.html#programming-languages">Programming Languages</a></p>
  3.     <p><a href="pagina2.html#cool-stuff">Cool Stuff</a></p>
  4.     <p><a href="pagina2.html#search-engines">Search Engines</a></p>
  5. </body>
  6. </html>

Página 2:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
  3.     <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
  4.     <script>
  5.         $(function(){
  6.             //analizar hash
  7.             var el_activo = location.hash ? location.hash.split('#')[1] : false;
  8.             if(el_activo){
  9.                 $('li.' + el_activo).addClass('expand');
  10.             }
  11.         });
  12.     </script>
  13.     <script src="menu.js" type="text/javascript"></script>
  14. </head>
  15.     <h2>2: Accordion with first submenu expanded at page load</h2>
  16.  
  17.     <ul class="menu">
  18.         <li class="weblog-tools">
  19.             <a href="#">Weblog Tools</a>
  20.             <ul class="acitem">
  21.                 <li><a href="http://www.pivotx.net/">PivotX</a></li>
  22.                 <li><a href="http://www.wordpress.org/">WordPress</a></li>
  23.                 <li><a href="http://www.textpattern.com/">Textpattern</a></li>
  24.                 <li><a href="http://typosphere.org/">Typo</a></li>
  25.             </ul>
  26.         </li>
  27.         <li class="programming-languages">
  28.             <a href="#">Programming Languages</a>
  29.             <ul class="acitem">
  30.                 <li><a href="http://www.php.net/">PHP</a></li>
  31.                 <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
  32.                 <li><a href="http://www.python.org/">Python</a></li>
  33.                 <li><a href="http://www.perl.org/">PERL</a></li>
  34.                 <li><a href="http://java.sun.com/">Java</a></li>
  35.                 <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
  36.             </ul>
  37.         </li>
  38.         <li><a href="http://www.i-marco.nl/weblog/">Marco's blog (no submenu)</a></li>
  39.         <li class="cool-stuff">
  40.             <a href="#">Cool Stuff</a>
  41.             <ul class="acitem">
  42.                 <li><a href="http://bookalicio.us/">Bookalicious</a></li>
  43.                 <li><a href="http://www.apple.com/">Apple</a></li>
  44.                 <li><a href="http://www.nikon.com/">Nikon</a></li>
  45.                 <li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
  46.                 <li><a href="http://www.nintendo.com/">Nintendo</a></li>
  47.             </ul>
  48.         </li>
  49.         <li class="search-engines">
  50.             <a href="#">Search Engines</a>
  51.             <ul class="acitem">
  52.                 <li><a href="http://search.yahoo.com/">Yahoo!</a></li>
  53.                 <li><a href="http://www.google.com/">Google</a></li>
  54.                 <li><a href="http://www.ask.com/">Ask.com</a></li>
  55.                 <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
  56.             </ul>
  57.         </li>
  58.     </ul>
  59. </body>
  60. </html>
__________________
nahueljose.com.ar