アクティブなページの動的下線番号

Question

似たような質問をしばらく前にして、私の答えを構築しようとしましたが、まだ問題があります。

ページ内のさまざまな場所にリンクするナビゲーションメニューがあります。アクティブなペインのリンクに下線を引いてください。デモンストレーションについてはjsFiddleを参照してください。 return falseはコードの必要な部分です。私は即座にジャンプするのではなく、場所にページを導くJavaScript関数を持っています。

ありがとうございました！

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; 
} 

はJavaScript

$('#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

まず、あなたは、cに必要jsFiddle

でhooseフレームワークjQueryのJS

を更新しました

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