jquery - 使用jquery将活动类动态添加到菜单项

Question

如何将“活动”类添加到“li”标签而不是“a”标签。我的代码：

var url = document.URL;
$('#example li a[href="'+url+'"]').addClass('active');

Answer 1

Alertnative #1 - 选择父母而不是孩子

您可以使用:has()选择器。

var url = document.URL;
$('#example li:has(a[href="'+url+'"])').addClass('active');

---

备选方案 #2 - 使用遍历函数到达父节点

您可以使用.parent()函数（如果锚点是列表项的直接子项）。

var url = document.URL;
$('#example li a[href="'+url+'"]').parent().addClass('active');

另一个更通用的选项是使用.closest()函数（即使锚不是列表项的直接子项也可以使用）。

var url = document.URL;
$('#example li a[href="'+url+'"]').closest("li").addClass('active');

Answer 2

使用该parent功能。

var url = document.URL;
$('#example li a[href="'+url+'"]').parent().addClass('active');

Answer 3

假设html是这样的：

 <div id='example'>
    <li>
       <a></a>
    </li>
 </div>

jQuery代码：

 var url = document.URL;
     $('#example li a').parent('li').attr('class','active');
     $('#example li a').attr('href',url);