Cómo implementar mostrando el anclaje con nombre solicitado usando jQuery / JavaScript / CSS
-
22-08-2019 - |
Pregunta
La página tiene un div contenedor que contiene varias Div de contenido. Cada div contenido tiene un anclaje con nombre. Sólo uno de los divs contenido se muestra a la vez:
Ejemplo:
<style>
.lurk { display: none; }
</style>
<div class="container">
<div id="c1">
<a name="#c1">One</a> is the loneliest number.
</div>
<div id="c2" class="lurk">
<a name="#c2">Two</a> is company.
</div>
<div id="c3" class="lurk">
<a name="#c3">Three</a> is a crowd.
</div>
</div>
<script>
// ... something that adds and removes the lurk class from the content divs
</script>
El comportamiento deseado es que si alguien solicita la página utilizando un anclaje con nombre válido en la URL, el código JavaScript / jQuery lo verá, ajustar las distintas propiedades de la pantalla de manera adecuada para que el contenido correspondiente al anclaje con nombre es visible.
- ¿Es la URL que solicita a disposición JQuery?
- es la comprobación de llamada anclas en la URL realizan generalmente temprano en $ (document) ready? ()
- ¿Es esto es difícil de conseguir justo en una camino entre navegadores?
- ¿Hay una rutina de biblioteca para extraer el ancla desde una URL o no rodar a todo el mundo su propia expresión regular?
Solución
Puede utilizar location.hash
para recuperar el ancla de la URL. Esto funciona en todos los navegadores y trabajará en $(document).ready
.
Por ejemplo:
$("div.container > div").removeClass("lurk");
if (location.hash)
$("#" + location.hash).addClass("lurk");
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow