How to set a background-color to element which has the same id with anchor of url?

Question

I have a HTML structure like this:

<table id="table-843" cellspacing="0" class="comment">
    <tbody>
        <tr id="43">
            <td class="vote_comment">3</td>
            <td class="content_comment">anything1</td>                          
        </tr>
        <tr id="44">
            <td class="vote_comment">7</td>
            <td class="content_comment">anything2</td>                          
        </tr>
    </tbody>
</table>

Also I have a url like this:

www.example.com/posts/231#44

Now I want to set a orange-background-color to <tr id="44"> and hide it after 2sec. exactly like stackoverflow. How can I do that? should I use JavaScript for that? or just CSS?

Answer 1

Try this:

var elem = $(location.hash).css('background-color', '#FC9A24');
setTimeout(function() {
   elem.css({"background-color":"transparent", "transition":"background-color 0.5s ease"});
}, 2000);

Answer 2

You can achieve this with CSS alone by using the target pseudo-class to select the row and then animating its background . Here's a quick example; click on the links under the table to see it in action:

 #table-843 tr:target{ animation:flash 1s; } @keyframes flash{ 0%,50%{ background:#fc9; } 100%{ background:#fff; } } *{color:#000;font-family:arial;} a{display:block;margin:0 0 5px;} table{border:1px solid #999;border-spacing:2px;margin:20px 0;} td{border: 1px solid #ccc;padding:5px;}

 <table id="table-843" cellspacing="0" class="comment"> <tbody> <tr id="43"> <td class="vote_comment">3</td> <td class="content_comment">anything1</td> </tr> <tr id="44"> <td class="vote_comment">7</td> <td class="content_comment">anything2</td> </tr> </tbody> </table> <a href="#43">Highlight #43</a><a href="#44">Highlight #44</a>

Answer 3

You can use window.location.hash to retrieve value of hash in url. It will return #44 , so you will have to trim 1st character.

CodePen .

Note: Kindly check on CodePen.

Code

 (function() { var id = window.location.hash.substring(1); console.log(id); document.getElementById(id).className = "orange"; })()

 .orange{ background:orange }

 <table id="table-843" cellspacing="0" class="comment"> <tbody> <tr id="43"> <td class="vote_comment">3</td> <td class="content_comment">anything1</td> </tr> <tr id="44"> <td class="vote_comment">7</td> <td class="content_comment">anything2</td> </tr> </tbody> </table>