如何在HTML中突出显示当前的id元素

How to highlight current id element in HTML

本文关键字：id 元素 显示 HTML      更新时间：2023-09-26

我想突出显示当前'#id'片段:

如果URL是:http://localhost:4321/store/zapakshop/#943

then id=943应该突出显示…

我已经试过了，但它不工作:

$(document).ready(function () {
    $(window.location.hash).effect("highlight", {
        color: "#FF0000"
    }, 3000);       
    });

帮我…

是的，它正在工作，但它正在永久地改变颜色，我只是想要一个闪光灯…——user2217267

Snook用CSS3做了一个很好的例子。下面是一个工作示例，改编自该页: 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css" media="all">
:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}
@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
</style>
</head>
<body>
<p>Click the link to <a href="#goal">target the div</a>.

<div id="goal">This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. </div>
</body>
</html>

你必须在包含jquery之后再包含jquery UI:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

您可以在CSS中使用目标伪类。这将突出显示当前在URL上以散列形式存在的具有ID的元素。

*:target {
    background-color: yellow;
}

MDN: https://developer.mozilla.org/en-US/docs/css/%3Atarget

如果你只是将样式应用于与URL中哈希值相同ID的元素，你可以通过target伪选择器:

:target {
   color:#f00;
}

来源:http://css-tricks.com/almanac/selectors/t/target/

Sacha抢先了我一步，但我将把链接留给CSS技巧文章，该文章很好地解释了这个伪选择器。

我使用

document.getElementById(id).style.outline = 'red solid 3px';

适用于所有有大纲的元素(比如textarea)。如果你想让它闪烁100毫秒，你的下一行可以是:

window.setTimeout(unoutline, 100);

，你将定义一个函数unoutline，像这样:

function unoutline()
{
  document.getElementById(id).style.outline = '';
}

您可以在http://www.staerk.de/regex上看到实际的代码。

相关文章：