Agradecería alguna orientación sobre qué dirección tomar con respecto a un diseño frontal.
Contexto:
Estoy tratando de crear una página donde tengo 10 botones en un panel superior. Debajo de este panel superior habrá un panel principal que contiene N cuadros de texto.
Dependiendo de qué botón en el panel superior se haga clic o esté activo (botón predeterminado 1), quiero que los cuadros en el panel principal muestren los cuadros de texto relevantes.
Ejemplo:
Un menú de restaurante donde tiene categorías como Comida, Bebidas, Postres en la parte superior. Y un apartado que actualiza y muestra las distintas opciones según la categoría seleccionada.
Un ejemplo mínimo:
3 botones o enlaces como Categoría1, Categoría2, Categoría3
Categoría1 debe tener 5 párrafos. La categoría 2 debe tener 3 párrafos. La categoría 3 debe tener 8 párrafos.
Estoy buscando una manera eficiente de implementar esto. ¿Algún consejo?
Entiendo que el DOM le permite a uno renderizar HTML dinámicamente usando la llamada a continuación, pero estoy confundido en cuanto a cómo 'crecer' elementos con este enfoque estático. Estoy decidido a aprender más JavaScript.
document.getElementsByClassName(“”).innerHTML = "New text" <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <div class = "main_content"> <nav> <ul id = "categories"> <li>Cat 1</a></li> <li>Cat 2</li> <li>Cat 3</li> </ul> </nav> <article class = "items_list"> <section class ="items"> <!--# of <p> elements and inner HTML text for each element depends on which <li> element is currently active --> <p>Item A</p> </section> <section class = "items"> <p>Item B</p> </section> <section class = "items"> <p>Item C</p> </section> </article> </div> </body> </html>Para cada categoría/botón, debe agregar un controlador de eventos que activará una función en el evento de onClick . Luego, de acuerdo con sus requisitos, puede agregar y eliminar clases en los párrafos que le permitirán mostrarlos y ocultarlos.
Esas clases simplemente pueden tener display:none o display:block .