Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Multi-section Page</title> | |
| <style> | |
| .section { display: none; } | |
| .section.active { display: block; } | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <ul> | |
| <li><a href="#/title-slide" onclick="navigate(event, 'title-slide')">Title Slide</a></li> | |
| <li><a href="#/aportes-4" onclick="navigate(event, 'aportes-4')">Aportes 4</a></li> | |
| <!-- Agrega más enlaces según sea necesario --> | |
| </ul> | |
| </nav> | |
| <div id="title-slide" class="section active"> | |
| <h1>Title Slide</h1> | |
| <p>Welcome to the title slide.</p> | |
| </div> | |
| <div id="aportes-4" class="section"> | |
| <h1>Aportes 4</h1> | |
| <p>Content for Aportes 4.</p> | |
| </div> | |
| <!-- Agrega más secciones según sea necesario --> | |
| <script> | |
| function navigate(event, sectionId) { | |
| event.preventDefault(); | |
| document.querySelectorAll('.section').forEach(section => { | |
| section.classList.remove('active'); | |
| }); | |
| document.getElementById(sectionId).classList.add('active'); | |
| } | |
| window.addEventListener('hashchange', () => { | |
| const hash = window.location.hash.replace('#/', ''); | |
| navigate(new Event('navigate'), hash); | |
| }); | |
| // Initialize the view based on the initial hash | |
| if (window.location.hash) { | |
| const hash = window.location.hash.replace('#/', ''); | |
| navigate(new Event('navigate'), hash); | |
| } | |
| </script> | |
| </body> | |
| </html> | |