CSS 또는 js로 현재 링크 강조 표시

Question

강조 표시된 링크에 작은 문제가 있습니다. 그래서 내가 원하는 : 페이지로드, 그것은 열린 축구 (링크) 카테고리 경우

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

그리고 내가 자동으로이 범주를 강조 할 때 페이지로드 (이 현재 링크의 색상 변경). 그리고 (다른 사람이) 다른 카테고리 (링크)를 클릭하면이 현재 카테고리가 강조 표시됩니다. 예를 들어 다른 링크와 다른 색상이있는 경우. 페이지에서 더 나은 방향으로 이동하는 데 필요합니다. JSFiddle 예제 here을 만들었습니다.

세트 색상을 문서 부하에 전류 범주 : 내가 하나를 업데이트

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

참고 :

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

변경 색상 카테고리 클릭에 내가 믿을

Answer 1

는 당신이 필요로하는 것입니다 nav 링크가 모두 동일한 클래스를 갖습니다.

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

updated fiddle