jquery - URLに基​​づいてliに下線を表示する方法

Question

CSS

a { text-decoration:none }
#nav .category ul li.active { text-decoration:underline; }

jquery

$(function(){
var url = location.href;
var pathArray = window.location.pathname.split('/');
var secondLevelLocation = pathArray[1];
      switch(secondLevelLocation) {
      case 'product':
        var val = getQueryString("cate_no");
        $('#nav .category ul li').each(function(index, element) {
            var pageLink = $(this).find('a:eq(0)').attr('href');
            var linkArr = pageLink.split('=');              
            if(linkArr[1] == val) {
                $(this).addClass('active');
            }           
        });
      }
});

html

<div id="nav">
    <div class="category">
        <ul>
            <li><a href=/product/list.html?cate_no=1>menu1</a></li>
            <li><a href=/product/list.html?cate_no=2>menu2</a></li>
            <li><a href=/product/list.html?cate_no=3>menu3</a></li>
            <li><a href=/product/list.html?cate_no=4>menu4</a></li>
        </ul>
    </div>
</div>

私には本当に負担です。

各ページのメニュー名にアンダーラインを表示したい。検索して見つけましgetQueryStringた。しかし、うまくいきません。

Answer 1

これは、jQuery セレクターを使用すると簡単になる場合があります。

$('#nav .category a[href="'+window.location.pathname+'"]').parent().addClass('active');