¿Existe alguna manera de resaltar el objetivo de un marcador?(www.site.com/page.htm#bookmark)?

StackOverflow https://stackoverflow.com/questions/54237

  •  09-06-2019
  •  | 
  •  

Pregunta

Quiero vincular un marcador en una página (mysite.com/mypage.htm#bookmark) Y resaltar visualmente el elemento que se marcó como favorito (tal vez con un borde rojo).Naturalmente, habrá varios elementos marcados como favoritos.De modo que si alguien hizo clic en #bookmark2 entonces eso se resaltaría otra área).

Puedo ver cómo hacerlo con .asp o .aspx pero me gustaría hacerlo de manera más simple.Pensé que tal vez había una forma inteligente de hacerlo con CSS.

POR QUÉ estoy interesado:- Quiero que nuestros programas se vinculen a una página de compras que enumere todos los programas que contiene.Estoy usando un marcador para que salten al área del programa en particular (site.com/shoppingpage#Programx), pero solo para hacerlo. obvio De hecho, me gustaría resaltar la página a la que se vincula.

¿Fue útil?

Solución

En tu CSS necesitas definir 

a.highlight {border:1px solid red;}

o algo similar

Luego usando jQuery, 

$(document).ready ( function () { //Work as soon as the DOM is ready for parsing
    var id  = location.hash.substr(1); //Get the word after the hash from the url
    if (id) $('#'+id).addClass('highlight'); // add class highlight to element whose id is the word after the hash
});

Para resaltar los objetivos al pasar el mouse, agregue también:

$("a[href^='#']")
    .mouseover(function() {
        var id  = $(this).attr('href').substr(1);
        $('#'+id).addClass('highlight');
    })
    .mouseout(function() {
        var id  = $(this).attr('href').substr(1);
        $('#'+id).removeClass('highlight');
    });

Otros consejos

También puedes utilizar el target pseudoclase en CSS:

<html>
<head>

<style type="text/css">
div#test:target {
 background-color: yellow;
}
</style>

</head>
<body>

<p><b><a href="#test">Link</a></b></p>

<div id="test">
Target
</div>

</body>
</html>

Desafortunadamente, la pseudoclase de destino no es compatible con IE u Opera, por lo que si está buscando una solución universal aquí, esta podría no ser suficiente.

Utilice su kit de herramientas JS favorito para agregar una clase "resaltada" (o lo que sea) al elemento que contiene (o está contenido en) el ancla.

Algo como:

jQuery(location.hash).addClass('highlight');

Por supuesto, deberá llamar a eso listo o hacer clic si desea que otros enlaces en la página lo activen, y querrá tener definida la clase .highlight.También puede hacer que su selector jQuery se desplace hacia arriba o hacia abajo dependiendo del contenedor que desee resaltar.

Supongo que si pudieras almacenar esta información con JavaScript y cookies para la funcionalidad de recordar los marcadores e incluso agregar un toque de Ajax si quisieras interactuar con una base de datos.

CSS solo podría aplicar estilos.Tendría que darle al ancla marcada una clase que se encuentre en su archivo CSS.

CSS también tiene el selector a:visited que se utiliza para diseñar enlaces que se encuentran en el historial del navegador.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top