対応するメニュー項目にクラスを追加する方法

Question

私は解決できない謎を持っています。

私は2つのナビゲーションを持っています。

<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の要素3に現在のクラスを追加したいと思いますその他のナビゲーション。

#menuの要素をクリックすると#menuと#nav .otherのクリックされた要素にクラスが追加され、#nav .other liをクリックすると対応する#menu li aにクラスが追加されます。

ありがとうございます！

Answer 1

試してみてください。

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

JS Fiddle demo。

参考文献：

• addClass()。
• click()。
• eq()。
• removeClass()。

Answer 2

あなたは.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 3

から配列を作ることができますうーん...あなたはメニューのような機能を必要とする理由をすべて正直に、私は理解できません、しかし...

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

これはこれです。

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