将不同的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 演示