0
161
Visualizações¿Cómo cargar contenido de página HTML específico cuando la redirección de página usa JavaScript?
En la página index.html de mi sitio web hay tres botones.
Después de hacer clic en estos botones, la página redirigirá a otra página llamada productandservices.html. En ellos muestro peces para cada categoría seleccionada (cuando alguien selecciona Peces de agua dulce en index.html, muestra peces de agua dulce en productandservices.html).
<a href="servicesAndProduct.html"><button class="menu-buttons">FRESHWATER FISH</button></a> <a href="servicesAndProduct.html"><button class="menu-buttons">MARINE FISH</button></a> <a href="servicesAndProduct.html"><button class="menu-buttons">AQUA PLANTS</button></a>En el ejemplo, puede ver los tres botones en la página index.html. Pero después de hacer clic, solo redireccionan la página. Pero no mostrar la categoría seleccionada. Para lograr eso, ¿Qué puedo hacer en Javascript?
Lo que quiero es que cuando alguien haga clic en Marine fish index.html, quiero mostrarles la categoría de peces marinos en servicesandproduct.html
1 Respostas
Responde à pergunta0
Realmente no sé cómo funciona su código en servicesAndProduct.html todavía.
Por ahora asumo que su página tiene contenido estático. Así que tienes todos los productos allí como a continuación. Digamos un div con el contenido de un producto y cada div tiene algunas clases para diseñar, como producto, la categoría y una clase que oculta el producto de forma predeterminada.
<div class="product marine-fish hidden"><!--product content--></div> <div class="product marine-fish hidden"><!--product content--></div> <div class="product aqua-plant hidden"><!--product content--></div>De esta manera podrá seleccionar todos los elementos con la clase que pertenece a la categoría que desea mostrar y simplemente eliminar la clase oculta. Entonces solo se mostrarán esos elementos.
En su página de índice, cambie los enlaces de la siguiente manera:
<a href="servicesAndProduct.html?cat=freshwater-fish"> <a href="servicesAndProduct.html?cat=marine-fish"> <a href="servicesAndProduct.html?cat=aqua-plant">En su servicesAndProduct.html agregará algo de Javascript como
const parameters = new URLSearchParams(window.location.search); const category = parameters.get("cat"); //now this says "freshwater-fish", "marine-fish" or "aqua-plant" // In this example the only thing you need to do now is show all elements from this category const elements = document.querySelectorAll("."+category); elements.forEach(element => { element.classList.remove('hidden'); });