css - 各ページのリストメニューの下線

Question

<ul>
<li><a href="/product/list.html?cate_no=1">menu 1</a></li>
<li><a href="/product/list.html?cate_no=2">menu 2</a></li>
<li><a href="/product/list.html?cate_no=3">menu 3</a></li>
</ul>

jqueryを使って、メニュー1をクリックしたら、リスト「メニュー1」に下線を引きたい。メニュー 2 をクリックすると、「メニュー 2」のみに下線が表示されます。

助けてください！

Answer 1

CSS:

a {
    text-decoration: none;
}

jQuery:

$("a").on( "click", function(event) {
    event.preventDefault();
    $("a").css( "text-decoration", "none" );
    $(this).css( "text-decoration", "underline" );
});