2013-04-30 54 views
1

电流id元素我想强调当前 '#ID' 片段:如何突出在HTML

一样,如果网址是:http://localhost:4321/store/zapakshop/#943

然后ID = 943应突出..

我曾经试过,但它不工作:

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

帮助我......

+0

什么是'.effect()'方法? – 2013-04-30 12:13:02

+0

是的,我知道这是错误的....我尝试了一些我在网上发现的... – 2013-04-30 12:14:40

+2

@ArtyomNeustroev我猜这是http://jqueryui.com/effect/ – 2013-04-30 12:14:41

回答

3

Yes it is working but it is changing the color permanently i just want a flash... – user2217267

Snook有一个用CSS3做这个的很好的例子。这是一个工作示例,改编自该页面:我这样做,使用

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

这个工程有一个大纲(如文本域)的所有元素

<!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> 
4

你必须包括jQuery UI后,你已经包含jQuery本身:

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

这是唯一明智的答案在这里,+1 – billyonecan 2013-04-30 12:19:57

+0

这凸显了完整的URL,要求就是要突出'943' – Bryan 2013-04-30 12:21:58

+0

现在控制台显示此错误'遗漏的类型错误:对象功能(选择,背景){ \t \t// jQuery对象实际上只是init构造函数'增强' \t \t返回新的jQuery.fn.init(选择器,上下文); \t}没有方法'isPlainObject'' – 2013-04-30 12:23:12

0

如果你只是应用样式的元素用相同的ID在你的URL散列,你可以做到这一点通过target伪选择:

:target { 
    color:#f00; 
} 

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

萨沙打败了我,但我会离开我的链接到CSS技巧文章,解释这个p seudo选择这么好。

+0

是的,它正在工作,但它永久地改变颜色我只想要一个闪光灯... – 2013-04-30 12:46:48

+0

你能帮助我...? – 2013-04-30 13:07:55

+0

你知道你需要支持的浏览器是否能够转换?请参阅http://caniuse.com/#feat=css-transitions – 2013-05-01 16:21:06

0

。如果你想闪此了100毫秒,你的下一行可以是:

window.setTimeout(unoutline, 100); 

,你会定义一个函数unoutline这样的:

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

你可以看到的代码在行动上http://www.staerk.de/regex