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

时间:2013-04-30 12:09:58

标签: javascript jquery html css

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

如果网址为:http://localhost:4321/store/zapakshop/#943

,则类似

然后应突出显示id = 943 ..

我试过这个,但它不起作用:

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

帮助我......

5 个答案:

答案 0 :(得分:4)

在包含jquery后,你必须包含jquery UI:

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

答案 1 :(得分:3)

  

是的它正在工作,但它正在永久改变颜色我只想要一个闪光灯...... - 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>

答案 2 :(得分:0)

您可以在CSS中使用目标伪类。这突出显示了具有ID的元素,该ID当前作为URL上的哈希值存在。

*:target {
    background-color: yellow;
}

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

答案 3 :(得分:0)

如果您只是将样式应用于与URL中的哈希值相同的元素,则可以通过target伪选择器执行此操作:

:target {
   color:#f00;
}

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

Sacha打败了我,但我会将我的链接留给CSS技巧文章,这篇文章很好地解释了这个伪选择器。

答案 4 :(得分:0)

我是用

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

这适用于所有具有轮廓的元素(如textarea)。如果要将其闪烁100毫秒,则下一行可以是:

window.setTimeout(unoutline, 100);

你会定义一个像这样的非线性函数:

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

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