javascript - クリックに基づいてUL/LIナビゲーションアイテムを「アクティブ」として「マーク」する方法は？

Question

各<aリンクは、jQueryが特定のdivを非表示（表示）するためのアンカーです。

私はこのCSSを使用してホバースタイルを処理しています：

ul.textMenu a:hover

{   
    border-bottom: 3px solid #ff5c00;
    margin-bottom: -3px;
}

border-bottomユーザーがアイテムをクリックした後、それを持続させたい。どうすればよいですか？

Answer 1

cssルールを追加する

ul.textMenu a.clicked

{   
    border-bottom: 3px solid #ff5c00;

}

そしていくつかのjs

$('ul.textMenu a').click( function() {
    // Remove the class clicked so that we have only one clicked item
    // Since there might be more than one ul i finde the parent.
    $(this).closest('ul.textMenu').find('a').removeClass('clicked')
    $(this).addClass('clicked');
} );

Answer 2

jQuery('ul.textMenu a').click(function () {
    jQuery('ul.textMenu a').removeClass('active');
    jQuery(this).addClass('active');
});

ul.textMenu a.activeのcssを設定して、CSSの境界線を維持します