用另一个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需要在firstdiv位置显示seconddiv数据。

为此我做了jQuery，但它不是正确的方法。

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

在这里，我已经做了firstdiv与seconddiv更换和改变id来firstdiv。
它在第一个位置显示数据<div>。但只向前展示。不如落后。因为我在这里用seconddiv代替firstdiv。所以它不适合。任何人都可以这样说。我怎样才能做到这一点向前和向后。

Answer 1

如果你改变你的HTML以下

Answer 2

<div id="firstdiv" class="myDiv" style="display:none;" > 
//first div data 
</div> 

<div id="seconddiv" class="myDiv" style="display:none;" > 
//first div data 
</div> 

<div id="lastdiv" class="myDiv" style="display:none;" > 
//last div data 
</div> 

<ul class="footer_links"> 
     <li><a href="#" id="firstlink" data-div="firtstdiv"></li> 
     <li><a href="#" id="secondlink" data-div="seconddiv"></li> 
     <li><a href="#" id="lastlink" data-div="lastdiv"></li> 
</ul> 

在JavaScript

：

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

$(function() { 
    $(".footer_link a")click(function(e){ 
     $(".myDiv").hide(); 
     $("#" + $(this).data("div")).show(); 
     e.preventDefault(); 
     return false; 
    }); 

});