Generation

generate functionWed, 01 Jan 2025

Genera un navbar

Aquí te muestro un ejemplo de cómo crear un navbar básico en JavaScript utilizando HTML, CSS y JavaScript: **index.html** ```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Navbar</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav id="navbar"> <ul> <li><a href="#" class="active">Inicio</a></li> <li><a href="#">Acerca de</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> <script src="script.js"></script> </body> </html> ``` **styles.css** ```css #navbar { background-color: #333; color: #fff; padding: 1rem; text-align: center; } #navbar ul { list-style: none; margin: 0; padding: 0; } #navbar li { display: inline-block; margin-right: 20px; } #navbar a { color: #fff; text-decoration: none; } #navbar a.active { color: #ccc; } ``` **script.js** ```javascript const navbar = document.getElementById('navbar'); const links = navbar.querySelectorAll('a'); links.forEach(link => { link.addEventListener('click', () => { links.forEach(l => l.classList.remove('active')); link.classList.add('active'); }); }); ``` En este ejemplo, creamos un navbar con cuatro enlaces y utilizamos JavaScript para agregar un evento de clic a cada enlace. Cuando se hace clic en un enlace, se remueve la clase "active" de todos los enlaces y se agrega a la clase "active" al enlace que se hizo clic. Recuerda que debes crear un archivo `styles.css` y un archivo `script.js` en la misma carpeta que el archivo `index.html` para que funcione correctamente.

Javascript
Generate More

Questions about programming?Chat with your personal AI assistant