Question

我的要求： 我有三个不同的<div>。当用户单击第一个链接时，应显示第一个<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/

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;
    });

});

用另一个divquery改变div的内容

2 个答案: