用另一個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; 
    }); 

});