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

Question

我的要求： 我有三个不同<div>的s。当用户单击第一个链接时，<div>应显示第一个数据。单击第二个链接时，<div>在 first 的位置显示第二个数据<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.
它在 first 的位置显示数据<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/

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 中：

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

});