활성 페이지의 동적 밑줄

Question

비슷한 질문을 한참 전에 내 대답을 구축하려고했지만 여전히 문제가 있습니다.

페이지 내의 다른 위치로 연결되는 탐색 메뉴가 있습니다. 활성 창 링크에 밑줄을 긋고 싶습니다. 데모를 보려면 jsFiddle을 참조하십시오. return false은 코드의 필수 부분입니다. 나는 즉시 그것에 점프 대신 위치로 페이지를 안내 자바 스크립트 함수가 있습니다.

감사합니다.

http://jsfiddle.net/danielredwood/aBuZu/3/

HTML

<div id="nav"> 
    <a href="#about" id="nav_about">ABOUT</a><br /> 
    <a href="#pictures" id="nav_pictures">PICTURES</a><br /> 
    <a href="#contact" id="nav_contact">CONTACT</a> 
</div> 

CSS

a, a:active, a:visited { 
    color:#1d1d1d; 
    text-decoration:none; 
} 
a:hover { 
    text-decoration:underline; 
} 

자바 스크립트

$('#nav a').click(function(){ 
    $('#nav a').css('text-decoration', 'none', function(){ 
     $(this).css('text-decoration', 'underline'); 
    }); 
    return false; 
}); 

Answer 1

을 시도해보십시오이 http://jsfiddle.net/aBuZu/1/

$('#nav a').click(function(){ 
    $('#nav a').css("textDecoration", "none"); 
    $(this).css('textDecoration', 'underline'); 
    return false; 
}); 

Answer 2

$(this).css('color', 'underline'); 

은 다소 난센스입니다. 아마도 색상은 텍스트 장식해야한다 : Example

Answer 3

$('#nav a').click(function(e){ 
    $('#nav a').css('text-decoration', 'none'); 
    $(this).css('text-decoration', 'underline'); 
    e.preventDefault(); 
}); 

Answer 4

쉽게 :

$('#nav a').click(function(event) { 
    event.preventDefault(); //same as return false 
    $('#nav a').removeClass('active');   
    $(this).toggleClass('active'); 
}); 

CSS :

a { 
    color:#1d1d1d; 
    text-decoration:none; 
} 
a:hover, a.active { 
    text-decoration:underline; 
} 

Answer 5

먼저 당신이 다 필요 jsFiddle

의 오세 워크 jQuery를 JS

업데이트

$('#nav a').click(function(){ 
    $('#nav a').css('text-decoration', 'none'); 
    $(this).css('text-decoration', 'underline'); 
    return false; 
});