javascript - アクティブなページの動的下線

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

より簡単に：

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

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

Answer 4

まず、jsFiddle でフレームワーク jQuery を選択する必要があります

更新された JS

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

Answer 5

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

ちょっとナンセンスです。おそらく、色は text-decoration にする必要があります:例