해당 메뉴 항목에 클래스를 추가하는 방법

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에 소자 (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"); 
}); 

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