How to highlight current id element in HTML

css, html, javascript, jquery

Solution

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

Snook has a nice example of doing this with CSS3. Here is a working example, adapted from that page:

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

Problem

I want to highlight current '#id' fragment: Like if the URL is : `http://localhost:4321/store/zapakshop/#943` then id=943 should be highlighted.. I have tried this but it is not working: ``` $(document).ready(function () { $(window.location.hash).effect("highlight", { color: "#FF0000" }, 3000); }); ``` Help me...

Original source