jQuery는 요소를 계산하는 토글 메뉴입니다.

Question

나는이에 가까운 HTML 마크 업이 있습니다

<ul class="menu"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link 4</a></li> 
</ul> 

<!-- some other elements and containers here --> 

<div class="content">Content 1</div> 
<div class="content">Content 2</div> 
<div class="content">Content 3</div> 
<div class="content">Content 4</div> 

불행하게도, 내가 마크 업을 변경할 수 없습니다와 나는 간단한 토글 기능을 작성해야합니다. 처럼 작동 뭔가 만드는 가장 좋은 방법은 무엇입니까 : 사용자가 fadeIn() 첫 페이지에 ".content을", "메뉴"에서 첫 번째 링크를 클릭하면

는

사용자가 "메뉴에서 두 번째 링크를 클릭하면 페이지

(...)

에 "fadeIn() 두 번째".content "? 일반적으로 사용자 정의 데이터 속성을 사용 하겠지만 여기서는 div와 링크를 어떻게 계산해야할까요? 알 수없는 수의 div/링크에서 작동하는 것이 좋을 것 같습니다.

Answer 1

당신은 그 인덱스로 index() 및 eq()를 사용할 수 있습니다

http://jsfiddle.net/Wr6Be/

$('.menu a').click(function(e) { 
    e.preventDefault(); 

    var idx = $(this).parent().index(); 

    $('.content:visible').fadeOut(function() { 
     $('.content').eq(idx).fadeIn(); 
    }) 

}); 

$('.content:first').show(); 

: 여기

---

http://jsfiddle.net/Hq69e/

$('.menu a').click(function(e) { 
    e.preventDefault(); 

    var idx = $(this).parent().index();  
    $('.content').hide().eq(idx).show(); 
}); 

는 페이딩과 조금 더 좋은 버전입니다