临时突出显示文本

Question

我正在尝试创建一个内部 link 来滚动到底部突出显示一个标签。当我尝试上面的代码时它没有突出显示，我必须刷新页面才能使其工作。

<p>Fındık eski Çin yazmalarında anlaşıldığına göre yaklaşık 5.000
    yıllık bir geçmişi olan Avrupa'nın mistik
    <sup><a href="#mistisizm">[1]</a></sup> ve orta çağlardan, Romalılardan...

<script>
function highlight(elemId){
  var elem = $(elemId);
  elem.css("backgroundColor", "#ffffff"); // hack for Safari
  elem.animate({ backgroundColor: '#ffffaa' }, 1500);
  setTimeout(function(){$(elemId).animate({ backgroundColor: "#ffffff" }, 3000)},1000);
}

if (document.location.hash) {
  highlight(document.location.hash);
}
$('a[href*=#]').click(function() {
  var elemId = '#' + $(this).attr('href').split('#')[1];
  highlight(elemId);
});
</script>

如何在不重新加载页面的情况下使此代码段正常工作？

Answer 1

这里有多个问题。您的 css select 或属性名称需要用引号引起来。没有它，代码给出

Uncaught Error: Syntax error, unrecognized expression: a[href*=#"]

其次，当你 select 一个带有 JQuery 的元素时，它是 returns 元素列表，但是必须为单个元素隐式调用 `animate`，所以固定代码如下所示：

<script>
    function highlight(elemId){
        let elem = $(elemId);
        elem.css("backgroundColor", "#ffffff"); // hack for Safari
        elem[0]?.animate({ backgroundColor: '#ffffaa' }, 1500);
        setTimeout(function(){elem[0]?.animate({ backgroundColor: "#ffffff" }, 3000)},1000);
    }

    if (document.location.hash) {
        highlight(document.location.hash);
    }
    $('a[href*="#"]').click(function() {
        let elemId = '#' + $(this).attr('href').split('#')[1];
        highlight(elemId);
    });
</script>

另外，不用var。使用 let 或 const。并且在 setTimeout 中不需要再次按 ID select 元素。就拿elem。
仅供参考 - 如果具有 ID 的元素不存在，?. 确保不调用该函数。那叫optional chaining

临时突出显示文本

Highlight text temporarily

javascript

highlight