Выделить текущую ссылку с помощью CSS или js

Question

У меня есть небольшая проблема с выделенной открытой ссылкой. Так что я хочу: Если при загрузке страницы, он в открытом футболе (ссылка) Категория:

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

И я хочу, чтобы выделить эту категорию автоматически при загрузке страницы (изменить цвет этой текущей ссылки). И после (кто-то) нажмите на другую категорию (ссылку), выделите эту текущую категорию. Например, с другим цветом, как это делают другие ссылки. Это необходимо для лучшей ориентации на странице. Я создал пример JSFiddle here.

Answer 1

Я считаю, что это то, что вам нужно:

набор цвет при загрузке документа для текущей категории:

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

изменение цвета на категории нажмите:

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

отметить, что я обновил один от навигационных ссылок, поэтому все они имеют один и тот же класс:

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

updated fiddle