¿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 tener dos events onClick separados con un elemento dentro de otro?
  • Menú desplegable de Javascript Alternar sobre clic
  • Javascript / jQuery "Gotchas"
  • Atasco personalizado KnockoutJS con múltiples selectores de color
  • .bootstrapTable ejecuta el código después de la actualización
  • Cómo detener contentEditable = "true" insertando <div> en lugar de <p> al presionar return?
  • ¿Cómo evitar presionar teclas dos dígitos después de un número decimal?
  • jquery desplazamiento suave a un ancla?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.