打開不同的div內容到相同的容器jquery

Question

JQuery有點新，我試圖有多個鏈接打開不同的相關內容到同一個容器。

JSFiddle

Answer 1

您可以使用data-* synatx HTML5的做到這一點：

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> 
​ 

的Javascript：

$('.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