2013-04-30 38 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