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

Question

JQuery有点新鲜，我正在尝试使用多个链接将不同的相关内容打开到同一个容器中。

JSFiddle

Answer 1

您可以使用HTML5的data-*语法来执行此操作：

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