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

【问题标题】：open different div content into same container jquery将不同的 div 内容打开到同一个容器 jquery 中
【发布时间】：2012-02-19 18:35:32
【问题描述】：

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

JSFiddle

【问题讨论】：

你能详细说明一下这个例子你想要什么吗？
点击链接1时，内容1加载到容器中，点击链接2，内容被内容2替换，以此类推

标签： javascript jquery hyperlink containers

【解决方案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 DEMO

【讨论】：

这差不多就是我想要的，只需要替换相关内容，而不是打开一个新容器
设法使用它并在这里解决了问题JSfiddle