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');