javascript - リンクがクリックされたときに内部アンカータグcssを変更する

Question

ページの特定の部分にリンクしているタグのリストを含むナビゲーションバーがあります。

リンクがクリックされてコンテンツが表示されているときに、javascriptまたはcssのいずれかを使用してリンクの不透明度を変更できるかどうか疑問に思いました。次のリスト項目がクリックされると、アクティブな不透明度に変更され、古いリンクが変更されます。通常に戻ります。

これがページと下部のナビゲーションバーの動作テストです： http ：//www.luvly.co.nz/space/process.html

Answer 1

このような疑似クラスを使用してそれを行うことができ:activeます:hover

#Navigation a:active
{
    opacity: 0.9;
}
#Navigation a:hover 
{ 
    opacity:0.4
}

これは例なので、これらのクラスをコードに従って配置してください。

Answer 2

js/process-slider.jsに次の行を追加します。

$('a.panel').click(function () {

    $('.selected').css('opacity','1'); /* this one - the normal state*/
    $('a.panel').removeClass('selected');
    $(this).addClass('selected');

    current = $(this);

    $('#wrapper').scrollTo($(this).attr('href'), 800);
    $('.selected').css('opacity','0.5'); /* and this one - the clicked state*/      

    return false;
});

注: 0.5 を任意の数値 (0 < x < 1) に変更します。

Answer 3

CSS を使用して、このようなことを行うことができます。特定の不透明度の設定についてはまだ言及していないため、以下の不透明度の値を希望する値に変更するだけです...

#process-nav-bar .panel:active {
opacity: 0.5;
}

#process-nav-bar .panel:hover {
opacity: 0.4;
}

#process-nav-bar .panel {
opacity:0.3; 
}