将不同的div内容打开到同一容器jquery中

Question

我对JQuery有点陌生，我试图拥有多个链接，这些链接可以将不同的相关内容打开到同一容器中。

的jsfiddle

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

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演示