jquery - 用另一个 div-jquery 更改 div 的内容

Question

我的要求: 我有三个不同的<div> s。当用户点击第一个链接时，首先<div>应显示数据。当点击第二个链接时，显示第二个 <div>第 <div> 位置的数据.

代码:

<div id="firstdiv" >
//first div data
</div>

<div id="seconddiv">
//second div data
</div>

<div id="lastdiv">
//last div data
</div>

<ul class="footer_links">
        <li><a href="#" id="firstlink"></li>
         <li><a href="#" id="secondlink"></li>
         <li><a href="#" id="lastlink"></li>
</ul>

当用户点击 firstlink 时，需要显示fistdiv数据，当用户单击secondlink时需要显示seconddiv firstdiv位置的数据.

为此我已经完成了 jQuery，但这不是正确的方法。

$(document).ready(function () {
    $("#firstdiv").replaceWith($('#seconddiv'));
    $('#seconddiv').attr('id', 'firstdiv');
});

这里我已经完成了firstdiv替换为 seconddiv并将 id 更改为 firstdiv .
它在第一个 <div> 的位置显示数据。但仅显示向前。没那么落后。因为这里我要替换firstdiv与 seconddiv 。所以这不是正确的方法。任何人都可以告诉这一点。我怎样才能向前和向后执行此操作。

Answer 1

如果您将 html 更改为以下内容:

<div id="firstdiv" class="datadiv">
//first div data
</div>

<div id="seconddiv" class="datadiv">
//second div data
</div>

<div id="lastdiv" class="datadiv">
//last div data
</div>

<ul class="footer_links">
    <li><a href="#firstdiv" id="firstlink" class="link">first</a></li>
    <li><a href="#seconddiv" id="secondlink" class="link">second</a></li>
    <li><a href="#lastdiv" id="lastlink" class="link">third</a></li>
</ul>

您可以使用以下 jquery:

var divs = $('.datadiv');
$('.link').click(function(e) {
    e.preventDefault();
    divs.hide();
    $($(this).attr('href')).show();
});

http://jsfiddle.net/uJ3yy/