Quiero tener todo mi sitio web como una sola página.
Al hacer clic en diferentes enlaces en la barra de navegación, el contenido debe pasar del antiguo al nuevo.
Ejemplo: estoy en index.html#home y hago clic en Acerca de. Esto debería fundirse entre los divs #home y #about.
Usando W3CSS y jQuery logré ocultar el contenido de esta manera:
function hideContent() { $(".content-active").addClass("w3-hide", "content-inactive"); $(".content-active").removeClass("w3-show", "content-active"); }; <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#home" class="w3-bar-item w3-hide-small" style="width:16.5%">Home</a> <a href="#about" class="w3-bar-item w3-hide-small" style="width:16.5%" onclick="hideContent()">About</a> <div id="home" class="w3-container w3-green w3-show content-active" style="height:50px"></div> <div id="about" class="w3-container w3-red w3-hide content-inactive" style="height:50px"></div>Sin embargo, no puedo mostrar el nuevo contenido. Quería agregar una función onclick al enlace de navegación y luego extraer el valor href para cambiar nuevamente los nombres de clase para el div que tiene la ID del valor href.
Pero hacer esto en <a href="#" onclick="showContent()></a> devuelve indefinido:
function showContent() { var hrefValue = $(this).attr("href"); alert(hrefValue); } Supongo que this no está dentro del alcance adecuado de <a> aquí. ¿Estoy suponiendo correctamente?
¿Cuál sería una manera fácil de mostrar el contenido de otra manera?
En lugar de incrustar su función en html, agregue una identificación a su elemento de anclaje y elimine el atributo onclick:
<a href="#about" id="aboutclick" class="w3-bar-item w3-hide-small" style="width:16.5%">About</a>Luego agregue un controlador de eventos al elemento usando el siguiente código para mostrar u ocultar y hacer las otras cosas que necesita hacer
$('#aboutclick').click(function(event) { ... }); Entonces event.target le dará el elemento que necesita y puede usarlo para obtener valores de atributo. Si está manejando eventos de clic, no olvide evitar la acción predeterminada si es necesario.
Más detalles aquí
Aquí tienes
$("#aboutclick").click(function(event) { const targetDiv=$(event.target).attr('href'); hideContent(); $(targetDiv).addClass("w3-show", "content-active"); }); function hideContent() { $(".content-active").addClass("w3-hide", "content-inactive"); $(".content-active").removeClass("w3-show", "content-active"); }; <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#home" class="w3-bar-item w3-hide-small" style="width:16.5%">Home</a> <a href="#about" id="aboutclick" class="w3-bar-item w3-hide-small" style="width:16.5%">About</a> <div id="home" class="w3-container w3-green w3-show content-active" style="height:50px">Home Div</div> <div id="about" class="w3-container w3-red w3-hide content-inactive" style="height:50px">About Div</div>¡Muchas gracias! Me tomó un tiempo digerir su respuesta y aplicarla correctamente al diseño de mi sitio web. Pero creo que encontré una buena manera de hacerlo ahora. Al menos hace lo que se supone que debe hacer y logré separar HTML de jQuery. Por favor, no dude en decirme si está pasando algo extraño:
$(document).ready(function() { $(".navItemClick").click(function(event){ const targetDiv = $(event.target).attr("href"); event.preventDefault(); $(".content-active").hide("slow", function() { $(this).removeClass("content-active"); $(this).addClass("content-inactive"); $(targetDiv).show("slow"); $(targetDiv).removeClass("content-inactive"); $(targetDiv).addClass("content-active"); }); }); });