2012-02-19 4 views
1

JQuery에 약간 새로운데, 다른 컨테이너를 다른 관련 콘텐츠로 여는 링크를 여러 개 만들려고합니다.동일한 컨테이너 jquery에 다른 div 콘텐츠 열기

JSFiddle

+0

이 예제에서는 원하는 것을 자세히 설명해 주실 수 있습니까? – uday

+0

링크 1을 클릭하면 내용 1이 컨테이너에로드되고 링크 2를 클릭하면 내용이 내용 2로 바뀝니다. 등등 –

답변

1

당신은 그것을 할 HTML5의 data-* synatx를 사용할 수 있습니다

HTML :

<a class="link" data-link="first" href="#">link 1</a> 
<a class="link" data-link="second" href="#">link 2</a> 
<a class="link" data-link="third" href="#">link 3</a> 

<div class="linkdetails" data-link="first" >content 1</div> 
<div class="linkdetails" data-link="second" >content 2</div> 
<div class="linkdetails" data-link="third" >content 3</div> 
​ 

자바 스크립트 :

$('.link').toggle(function() { 
    $('.linkdetails[data-link=' + $(this).data('link') + ']').animate({ 
     width: '200px' 
    }, 300); 


}, function() { 
    $('.linkdetails[data-link=' + $(this).data('link') +']').animate({ 
     width: '0px' 
    }, 300); 

});​ 

JSFiddle DEMO

+0

이것은 거의 내가했던 것과 거의 같습니다. 관련 내용을 바꾸기 만하면됩니다. 새 컨테이너 –

+0

이것을 사용하고 여기에서 문제를 해결했습니다. [JSfiddle] (http://jsfiddle.net/unbornink/LUKGt/) –

+0

@ChrisMead. 좋은데. 행운을 빕니다! – gdoron