Tema: Problema ocultar y mostrar div -> jQuery Mobile
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 11/07/2013, 13:22
Avatar de Aeon1
Aeon1
 
Fecha de Ingreso: enero-2012
Mensajes: 57
Antigüedad: 12 años, 3 meses
Puntos: 3
Respuesta: Problema ocultar y mostrar div -> jQuery Mobile
creo que estas haciendo mal las cosas, ya que estas agregado una funcion para recojer del <a> si quieres ir al m1 o al m2 siendo que es una funcion de jquerymobile
en el <a> debes de indicarle a a donde va a ir y no con un script como lo haces tu debes de checar la doc de jquerymobile que te dice como hacer las transiciones,
te dejo como debe de quedar tu pag para que funcione.
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.     <title>Catálogo Messier</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  6.     
  7.     <!-- CSS -->
  8.     <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
  9.     <style>
  10.         img.fullscreen {
  11.             max-width: 100%;
  12.         }       
  13.     </style>
  14.     
  15.     <!-- JS -->
  16.     <script src="jquery/js/jquery-1.9.1.min.js"></script>
  17.     <script src="js/jquery.mobile-1.3.1.min.js"></script>
  18.     
  19.     
  20. </head>
  21. <body id="pagina_entera">
  22. <div data-role="page" id="home" class="estilo_entero" data-theme="c" >
  23.     <header data-role="header" >
  24.         <h1>Catálogo Messier</h1>
  25.         <a href="#info" data-icon="info" data-iconpos="notext">Info</a>
  26.         <a data-icon="gear" data-iconpos="notext" id="nocturno" >Nocturno</a>
  27.     </header>
  28.     <article data-role="content">
  29.         <ul data-role="listview"  data-filter="true" id="listview_jquery" >
  30.             <li>
  31.                 <a href="#m1">
  32.                     <img src="imagenes/miniatura/m1.jpg" alt="" />
  33.                     <h2>M1</h2>
  34.                     <p>Nebulosa del Cangrejo, NGC 1952 </p>
  35.                 </a>
  36.             </li>
  37.             <li>
  38.                 <a href="#m2">
  39.                     <img src="imagenes/miniatura/m2.jpg" alt="" />
  40.                     <h2>M2</h2>
  41.                     <p>NGC 7089</p>     
  42.                 </a>
  43.             </li>
  44.         </ul>
  45.     </article>
  46. </div>
  47.  
  48. <!-- M1 -->
  49. <div data-role="page" id="m1">
  50.     <header data-role="header">
  51.         <h1 style="width: 310px; margin-left: auto; margin-right: auto; padding-left: 30px;">M1, Nebulosa del Cangrejo, NGC 1952 </h1>
  52.         <a href="#home" data-icon="back" data-iconpos="notext">Home</a>
  53.     </header>
  54.     <img src="imagenes/grandes/m1.jpg" class="fullscreen" />
  55.     <div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
  56.         <div data-role="collapsible">
  57.             <h3>Características</h3>
  58.             <p>
  59.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Denominación</div>
  60.                 <b>Nombre:</b> M1</br />
  61.                 <b>Otras catalogaciones:</b> NGC 1952</br />
  62.                 <b>Tipo:</b> Nebulosa del Cangrejo</br /></br />
  63.                 
  64.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Coordenadas</div>
  65.                 <b>AR:</b> 05h 35.0m</br />
  66.                 <b>Dec:</b> +22º 01'</br /></br />
  67.                 
  68.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Constelación</div>
  69.                 <b> Cassiopeia </b></br /></br />
  70.                 
  71.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Magnitud</div>
  72.                 <b>Visual:</b> 6.9</br />
  73.                 <b>Superficial:</b> 12.0 </br />
  74.                 <b>Estrella central:</b> 8.2</br /></br />
  75.                 
  76.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Morfología</div>
  77.                 <b>Dimensiones:</b> 8x4 m</br /></br />
  78.             </p>
  79.         </div>
  80.         <div data-role="collapsible">
  81.             <h3>Observación</h3>
  82.             <p>
  83.                 La nebulosa puede verse bien bajo un cielo oscuro y despejado, pero puede ser igualmente fácil perderla con el fondo de contaminación lumínica en condiciones menos favorables. M1 es visible como una mancha tenue con unos binoculares 7x50 o 10x50. Con un poco más de aumento, puede verse como una mancha nebulosa ovalada, rodeada por un halo. En telescopios de a partir de 10 centímetros de apertura, comienzan a aparecer algunos detalles de su forma, con algunos indicios de estructuras de puntos o rayas en la zona central de la nebulosa. Los aficionados pueden comprobar la impresión de Messier de que M1 efectivamente parece un débil comenta sin cola en pequeños instrumentos. Solo bajo excelentes condiciones y con mayores telescopios, a partir de 40 centímetros de apertura, empiezan a hacerse visibles las finas estructuras filamentosas.
  84.             </p>
  85.         </div>
  86.         <div data-role="collapsible">
  87.             <h3>Localización</h3>
  88.             <p>
  89.                 La Nebulosa del Cangrejo puede encontrarse con bastante facilidad a partir de Zeta Tauri (o 123 Tauri), el 'Cuerno Sur' del Toro, una estrella de tercera magnitud que puede encontrarse fácilmente al Este-Noreste de Aldebarán (Alfa Tauri). M1 se encuentra más o menos a 1 grado Norte y 1 grado Oeste de Zeta, ligeramente al sur y aproximadamente medio grado al Oeste de la estrella de magnitud 6, Struve 742.<br />
  90.                 <img src="imagenes/localizacion/m1.jpg" alt=""  class="fullscreen"/>
  91.             </p>
  92.         </div>
  93.     </div>
  94. </div>
  95.  
  96. <!-- M2 -->
  97. <div data-role="page" id="m2">
  98.     <header data-role="header">
  99.         <h1 style="width: 310px; margin-left: auto; margin-right: auto; padding-left: 30px;">M2, Cúmulo globular en Aquarius, NGC 7089 </h1>
  100.         <a href="#home" data-icon="back" data-iconpos="notext">Home</a>
  101.     </header>
  102.     <img src="imagenes/grandes/m2.jpg" class="fullscreen" />
  103.     <div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
  104.         <div data-role="collapsible">
  105.             <h3>Características</h3>
  106.             <p>
  107.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Denominación</div>
  108.                 <b>Nombre:</b> M2</br />
  109.                 <b>Otras catalogaciones:</b> NGC 7089</br />
  110.                 <b>Tipo:</b> Cúmulo globular</br /></br />
  111.                 
  112.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Coordenadas</div>
  113.                 <b>AR:</b> 21h 33.0m</br />
  114.                 <b>Dec:</b> 00º 49'</br /></br />
  115.                 
  116.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Constelación</div>
  117.                 <b> Aquarius</b></br /></br />
  118.                 
  119.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Magnitud</div>
  120.                 <b>Visual:</b> 6.5</br />
  121.                 <b>Superficial:</b> 11.0 </br />
  122.                 <b>Estrella central:</b> 13.1</br /></br />
  123.                 
  124.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Morfología</div>
  125.                 <b>Dimensiones:</b> 11.7 m x</br /></br />
  126.             </p>
  127.         </div>
  128.         <div data-role="collapsible">
  129.             <h3>Observación</h3>
  130.             <p>
  131.                 Con su magnitud visual de 6,5, M 2 es un objeto difícil para la observación a simple vista (no visible bajo condiciones 'medias'), pero es un objetivo fácil para instrumentos ópticos ligeros como prismáticos o anteojos de ópera, en particular, porque está situado en un campo poco estrellado. Un telescopio de 4 pulgadas libre de obstrucción (refractor o Schiefspiegler*) no resuelve este cúmulo, sino que muestra solo algunas de sus estrellas más brillantes diseminadas sobre la imagen nebulosa de fondo causada por las estrellas no definidas. Con uno de 20 centímetros, este cúmulo globular se define parcialmente en estrellas, incluso en el centro con buenas condiciones de visibilidad. Se necesitan telescopios más grandes, de 25 centímetros y más, para definir completamente este cúmulo. Un surco oscuro peculiar cruza el borde noroccidental del cúmulo. Telescopios más grandes (de 40 centímetros en adelante) muestran otras varias estructuras o regiones más oscuras, menos prominentes.
  132.             </p>
  133.         </div>
  134.         <div data-role="collapsible">
  135.             <h3>Localización</h3>
  136.             <p>
  137.                 M2 se encuentra fácilmente desde Alfa y Beta Aquarii, así como Epsilon Pegasi. Está 5 grados al norte de Beta Aquarii, en la misma declinación que Alfa Aquarii.
  138.                 <img src="imagenes/localizacion/m2.jpg" alt=""  class="fullscreen"/>
  139.             </p>
  140.         </div>
  141.     </div>
  142. </div>
  143. </body>
  144. </html>