Question

我的HTML看起来像这样

<ul id="navigation">
 <li><a href="#">menu 1</a></li>
 <li><a href="#">menu 2</a></li>
 <li><a href="#">active me</a></li>
 <li><a href="#">menu 4</a></li>
</ul>

<ul id="subNavigation">
 <li><a href="#">click me</a></a>
 <li><a href="#">click me</a></a>
 <li><a href="#">click me</a></a>
</ul>

我希望实现的是点击任意#subNavigation个链接，激活我 #navigation始终拥有current-menu-item class

我试试这个JS，但没有工作。

<script type="text/javascript">
(function($) {
    $(function() {
        $('#subNavigation > a').click(function () {
                  $('#navigation:nth-child(3)').addClass("current-menu-item");
              });
    });
})(jQuery);
</script>

css

.current-menu-item {color:#000}

Answer 1

尝试在导航中添加li。

$(function() {
    $('#subNavigation > a').click(function () {
              $('#navigation li:nth-child(3)').addClass("current-menu-item");
          });
});

Answer 2

在您的代码中：$('#navigation:nth-child(3)').addClass("current-menu-item");

这：'#navigation:nth-child(3)'

选择带有navigation id的第三个元素。 Brcause :nth-child() Selector选择子元素集合/集合的特定索引。

因此，您应首先选择子li，然后选择子li的具体数量（在您尝试获取第三个li元素的情况下）。

使用此：

$('#navigation li:nth-child(3)').addClass("current-menu-item");

或者如果您想选择anchor tag：

$('#navigation li:nth-child(3) > a').addClass("current-menu-item");

Working Fiddle

Answer 3

<强> Demo 尝试使用eq()

 $('#subNavigation li a').click(function () {
    $('#navigation li:eq(2)').addClass("current-menu-item");

});

Answer 4

小提琴：http://jsfiddle.net/jjs5F/

有一些问题：

请记住在subNavigation下正确嵌套列表。
您正在尝试在subNavigation下选择直接锚点，而不是列表项目中的锚点。
```
$('#subNavigation > li > a')
```
添加课程时需要指定li：
```
$('#navigation li:nth-child(3)')
```

Answer 5

试试这个方法

$(function () {
    $('#subNavigation a').click(function () {
        $('#navigation li:eq(2)').addClass("current-menu-item");
    });
});

DEMO

添加和删除类jquery

5 个答案:

添加和删​​除类jquery

5 个答案:

添加和删除类jquery