javascript - Highlight current link with CSS or js

Question

I have small problem with highlight opened link. So what I want: If page load, it open football (link) category:

<script type="text/javascript">
       var x = location.hash.replace("#", "");
       if (x===""){
         window.location.href = "#football";
        }
</script>

And I want to highlight this category automatically when page load (change color of this current link). And after (someone) click on other category (link) highlight this current category. For example with other color as other links have. It is needed for better orientation on page. I created JSFiddle example here.

Answer 1

I believe this is what you need:

set color on document load for current category:

$('#link-' + hashStr).css({
     'color': 'red'
});

change color on category click:

$('.nav1').css({'color': 'black'});
$('#link-' + hashStr).css({'color': 'red'});

note that i updated one of the nav links so they all have the same class:

<li><a class="nav1" data-tab="#hockey" id="link-hockey"href="#hockey">Hockey</a></li>

updated fiddle