Question

我有一个我无法解决的谜语。

我有两个导航。

<ul id="menu">
<li><a href="#">element1</a></li>
<li><a href="#">element2</a></li>
<li><a href="#">element3</a></li>
<li><a href="#">element4</a></li>
<li><a href="#">element5</a></li>
</ul>

<div id="nav">
<ul class="other">
<li><a href="#">element 1</li>
<li><a href="#">element 2</li>
<li><a href="#">element 3</li>
<li><a href="#">element 4</li>
<li><a href="#">element 5</li>
</ul>
</div>

我想做的是：

当我点击#menu元素3时，我想将addClass当前添加到此元素，并将当前类添加到#nav .other导航中的元素3。

因此，单击#menu中的元素将导致为#menu和#nav .other的单击元素添加一个类，并且还单击#nav .other li a将导致向相应的#menu li a添加一个类。

提前致谢！

Answer 1

你可以使用.index（）或者从元素中创建一个数组

$("#menu li a, #nav li a").click(function() {
    var clickeElement = $(this).index();

    $("#menu li:nth-child(clickeElement), #nav li:nth-child(clickElement)").addClass("myClass");

});

Answer 2

尝试：

$('ul li').click(
    function(){
        $('.current').removeClass('current');
        $(this).addClass('current');
        $('#nav ul li').eq($(this).index()).addClass('current');
    });

JS Fiddle demo

参考文献：

Answer 3

嗯......说实话，我不明白为什么你需要这样的菜单功能，但是......

$("#menu li").click(function(){
    i = $(this).index();
    $(".current").removeClass("current");
    $(this).addClass("current");
    $("#nav li:eq(" + i + ")").addClass("current");
});

这个outta做到了。

Answer 4

实际上这是一种非常脆弱的方法，随着你的html改变，很难维护，这是一个你可能想要考虑的不同方法：

HTML：

<ul id="menu">
  <li data-menu="item1"><a href="#">element1</a></li>
  <li data-menu="item2"><a href="#">element2</a></li>
  <li data-menu="item3"><a href="#">element3</a></li>
  <li data-menu="item4"><a href="#">element4</a></li>
  <li data-menu="item5"><a href="#">element5</a></li>
</ul>

<div id="nav">
  <ul class="other">
    <li data-menu="item1"><a href="#">element 1</li>
    <li data-menu="item2"><a href="#">element 2</li>
    <li data-menu="item3"><a href="#">element 3</li>
    <li data-menu="item4"><a href="#">element 4</li>
    <li data-menu="item5"><a href="#">element 5</li>
  </ul>
</div>

jquery的：

$('#menu li').click(function(){
    $('.current').removeClass('current');
    $(this).addClass('current');
    var menu = $(this).data('menu');
    $('#nav li[data-menu="'+menu+'"]').addClass('current');
});

如何将类添加到相应的菜单项

4 个答案: