ナビゲーションバーのサブリンクのアンダーライン

Question

私は小さなサイトを作っています。ナビゲーションバーのリンクがアクティブな場合、リンクに下線が表示されます。ここでは、 "Formidling"アクティブ：[例サイト] [1]です。問題は、左側のサイドバーでfx： "Kurser"をクリックすると下線が消えてしまうことです。

サイドバーのサブメニューをクリックすると、下線がメニューバーに残ります。

私は次のコードでこれを解決しようとしましたが、間違った方法をとっていると思いますか？

.current-menu-item { 
    text-decoration: underline !important; 
} 

a:active { 
    color: #993366; 
    text-decoration: underline; 
    outline: 0; 
} 

Answer 1

あなたのjsに以下を追加してください。

私がここで行ったことは、各サイドバーのリンクにクリックイベントを追加することです。クリックすると、すべてのサイドバーのリンクからクラスcurrent-menu-itemが削除され、クリックしたクラスにこのcurrent-menu-itemクラスを追加します。

$(document).ready(function() { 

    $('.content-sidebar-wrap a').click(function() { 
    $('.content-sidebar-wrap a').removeClass('current-menu-item'); 
    $(this).addClass('current-menu-item'); 
    }); 

});