solapas.html

  1. <!DOCTYPE html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Uso de pestaƱas con Javascript</title>
  4. <link href="solapas.css" rel="stylesheet" type="text/css">
  5. <script src="/javascripts/prototype.js" type="text/javascript"></script>
  6. <script src="solapas.js" type="text/javascript"></script>
  7. </head>
  8.  
  9. <div id="global">
  10.  
  11. <div id="encabezado">
  12. <h1>Uso de pestaƱas con Javascript</h1>
  13. </div><!--#encabezado-->
  14.  
  15. <div id="navegacion">
  16. <ul>
  17. <li class="activo"><a href="#">Primero</a></li>
  18. <li><a href="#">Segundo</a></li>
  19. <li><a href="#">Tercero</a></li>
  20. <li><a href="#">Cuarto</a></li>
  21. </ul>
  22. </div><!--#navegacion-->
  23.  
  24. <div id="contenidos">
  25.  
  26. <div id="contenido1">
  27. <h2>Nam facilisis ultricies eros nec molestie.</h2>
  28. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel felis diam, in euismod leo. Nam mattis erat ac nunc placerat sollicitudin. Ut ac felis quam. Sed molestie ornare neque, a adipiscing enim ultrices eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut et nibh vulputate felis ullamcorper rhoncus vel convallis mi. Ut sodales accumsan urna et aliquet. Fusce consectetur molestie pulvinar. Nulla lobortis cursus mauris nec sodales.
  29. </p>
  30. </div><!--#contenido1-->
  31.  
  32. <div id="contenido2" style="display:none;">
  33. <h2>Etiam fermentum malesuada vehicula.</h2>
  34. <p>Donec lobortis, diam ut hendrerit malesuada, sem ligula consectetur neque, vitae commodo dui mi et leo. Fusce feugiat eros eget libero venenatis pulvinar. Nam eget purus massa. Etiam a est euismod elit molestie rhoncus. Etiam facilisis molestie lectus, ut rutrum risus dapibus tempus. Vestibulum ut vestibulum metus. Integer risus lorem, tincidunt a ultricies convallis, euismod eu dolor.
  35. </p>
  36. </div><!--#contenido2-->
  37.  
  38. <div id="contenido3" style="display:none;">
  39. <h2>Nulla at lectus odio, commodo placerat sem.</h2>
  40. <p>Aliquam non nisl tortor, id pellentesque eros. Nunc mattis varius lectus, sed volutpat ipsum commodo id. Vestibulum fermentum tincidunt mattis. Integer pulvinar dolor in neque lacinia pharetra. Mauris vulputate, nisl fermentum rutrum iaculis, quam nisl condimentum massa, eget placerat quam sapien ac magna. Phasellus volutpat eleifend neque, vehicula volutpat leo aliquam in. Nulla facilisi. Vestibulum vitae orci lacus. Nunc et nisi eu metus volutpat blandit non non eros. Donec dui turpis, fermentum in aliquet ac, faucibus id nibh. Suspendisse potenti. Aliquam ac placerat velit.
  41. </p>
  42. <p>Mauris rutrum, augue nec bibendum placerat, leo lorem molestie turpis, a mattis nunc massa sed tellus. Donec gravida, justo nec tincidunt dignissim, ante mi pellentesque orci, in elementum elit sem aliquam tortor. Nulla facilisis diam non mi sagittis scelerisque. Nullam lacus est, faucibus eget facilisis sed, accumsan vel elit. Etiam sollicitudin euismod massa, eu posuere risus eleifend eu. Ut a odio risus. Sed ut odio eget ipsum mattis pellentesque ac id velit. Nulla a nisl fermentum nisl laoreet laoreet sit amet sit amet sem. Donec adipiscing eleifend ipsum, sit amet tempor lacus imperdiet eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ut ultricies metus.
  43. </p>
  44. </div><!--#contenido3-->
  45.  
  46. <div id="contenido4" style="display:none;">
  47. <h2>Aenean mattis lectus ut elit vulputate nec lobortis orci vulputate.</h2>
  48. <p>Nam erat lacus, molestie vel varius sed, eleifend ut tortor. Nunc iaculis commodo tortor, vitae aliquam dolor tempus ac. Mauris ullamcorper imperdiet pharetra. Donec sapien nunc, ultricies eget accumsan a, scelerisque rutrum dui. Morbi ullamcorper enim ac nibh rutrum auctor. Vestibulum sed mi velit.
  49. </p>
  50. <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus ac ligula metus. Integer pellentesque, justo eget imperdiet auctor, risus nulla sagittis orci, eu fermentum nisl ligula quis eros. Morbi enim arcu, ultrices semper faucibus non, rhoncus eu justo.
  51. </p>
  52. </div><!--#contenido4-->
  53.  
  54. </div><!--#contenidos-->
  55.  
  56. <div id="pie">ProInf.net &copy;2012
  57. </div><!--#pie-->
  58.  
  59. </div><!--#global-->
  60.  
  61.  
  62. </body>
  63. </html>
  64.  

Proinf.net