¿Cómo puedo resaltar un div específico de un hash en la URL?

Cuando un usuario visita un website a través de www.example.com/#div4 , me gustaría que la split especificada en la URL se resalte con #F37736 (naranja) y luego dentro de 2 segundos #00A087 suavemente a #00A087 (el color pnetworkingeterminado) )

El div se resaltará como una class de "barra de navigation fija".

Lo que he intentado:

 var hash = false; checkHash(); function checkHash(){ if(window.location.hash != hash) { hash = window.location.hash; } t=setTimeout("checkHash()",400); }; 

2 Solutions collect form web for “¿Cómo puedo resaltar un div específico de un hash en la URL?”

Podrías search el hash, luego apuntar a la split por su nombre de class. Inmediatamente cambiarás el color del div a tu color naranja y luego lo animarás a tu color pnetworkingeterminado.

Sin embargo, deberá include la biblioteca de jQuery Color para animar el background-color , ya que vanilla jQuery no puede animar background-color . También puede usar el efecto de resaltado de jQuery UI , pensó que la biblioteca de la interfaz de usuario es un poco más grande.

 $(document).ready(function () { var hash = window.location.hash; $('.' + hash).css('background-color', '#F37736').animate({ backgroundColor: '#00A087' }, 2000); }); 

Asumo que quieres resaltar el color de background en algunos events. Intenta agregar este CSS a tu código. Esto resaltará el color de background en el vuelo estacionario.

 .fixed-nav-bar { background-color: #f37736; } .fixed-nav-bar:hover { background-color: #00a087; -webkit-transition: background-color 2000ms linear; -moz-transition: background-color 2000ms linear; -o-transition: background-color 2000ms linear; -ms-transition: background-color 2000ms linear; transition: background-color 2000ms linear; } 

Espero que esto te ayudará.

  • ¿Cómo utilizar patrón de cadena con patrón de module de auto revelación en JavaScript?
  • Filtrar elementos JQuery que tienen visualización CSS Style: ninguno
  • Prácticas recomendadas de JavaScript para desarrolladores de asp.net mvc
  • Creación de diagonal borde-radio
  • DataTables - _fnAjaxDataSrc - No se puede leer la propiedad 'length' de undefined
  • ¿Es seguro el método jQuery .text () XSS?
  • jquery count hermanos no devuelve el resultado correcto?
  • almacenar una variable en localStorage es demasiado lento
  • Obtenga la Id. De fila de la tabla después del evento dropzone
  • jquery: .toggle ('slow') animation de arriba hacia abajo?
  • Depuración AngularJS Internet Explorer Lock-up
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.