如何用JS强制AJAX加载元素触发:target CSS高亮动画？

Great question! The issue here is that browsers only check for the :target pseudo-class when the page first loads or when the URL hash changes. Since your element gets loaded later via AJAX, the browser never triggers that pseudo-class for it—so your CSS animation never runs.

You can’t directly "force" an element into the :target state with JavaScript (that pseudo-class is purely controlled by the browser based on the URL’s anchor), but you can replicate the animation behavior reliably with a couple of solid workarounds:

Option 1: Use a CSS Class Instead of :target (Recommended) #

This approach is more controlled and avoids any weird browser behavior with hash changes. Here’s how to do it:

1. First, define a reusable highlight class that mirrors your original animation:

/* Keep your existing keyframes definition */
@keyframes highlight {
  0% { background-color: #ffffcc; /* Adjust to your preferred highlight color */ }
  100% { background-color: transparent; }
}

/* Create a class to replicate the :target animation */
.highlight-animation {
  animation: highlight 2s ease;
}

2. Then, in your AJAX success callback, check the current URL’s hash, find the target element, and apply the class:

// Inside your AJAX load completion function
function onAjaxContentLoaded() {
  // Extract the target ID from the URL hash (remove the leading #)
  const targetId = window.location.hash.slice(1);
  
  if (targetId) {
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      // Add the animation class to trigger the highlight
      targetElement.classList.add('highlight-animation');
      
      // Remove the class once the animation finishes (so it can trigger again later)
      targetElement.addEventListener('animationend', () => {
        targetElement.classList.remove('highlight-animation');
      }, { once: true });
    }
  }
}

This gives you full control over when the animation runs, and it works flawlessly for elements loaded after the initial page load.

Option 2: Trigger a Hash Change (Less Ideal) #

If you really want to stick with the :target pseudo-class, you can force the browser to re-check the hash after your AJAX content loads. However, this can cause unwanted page scrolling or visual glitches, so it’s not the best choice for most cases:

function onAjaxContentLoaded() {
  const originalHash = window.location.hash;
  
  if (originalHash) {
    // Temporarily clear the hash, then restore it to trigger the :target check
    window.location.hash = '';
    setTimeout(() => {
      window.location.hash = originalHash;
    }, 10); // Short delay to let the browser register the hash change
  }
}

The downside here is that the browser will scroll to the top when you clear the hash, then scroll back to the target element. This can be jarring for users, so Option 1 is almost always the better pick.

内容的提问来源于stack exchange，提问作者user13775976