1

我试图在单击 div 时替换内容。我已经实现了这种使用 jQuery 但目前内容只是堆叠而不是被替换..

<script>
$(document).ready(function(){
  $("#link1").click(function(){
     $('#content1').fadeIn('slow');
  });
  $("#link2").click(function(){
     $('#content2').fadeIn('slow');
  });
});
</script>

<a id="link1" href="#">Link 1</a>
<a id="link2" href="#">Link 2</a>

<div id="content1">
    This is the test content for part 1
</div>
<div id="content2">
        This is the test content for part 2
</div>

http://jsfiddle.net/Wqc9N/

有人可以帮忙吗？

4

4 回答 4

2

您需要制作内容 div position: absolute，然后将它们放入position: relative容器中。尝试这个：

.content-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.content-container div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

$("#link1").click(function () {
    $('#content1').fadeIn('slow');
    $('#content2').fadeOut('slow');
});
$("#link2").click(function () {
    $('#content1').fadeOut('slow');
    $('#content2').fadeIn('slow');
});

更新的小提琴

为了减少添加/删除链接时所需的维护量，请尝试以下方法，该方法使用类使元素更通用，并使用data属性来维护相关元素之间的连接。

<a class="link" href="#" data-rel="content1">Link 1</a>
<a class="link" href="#" data-rel="content2">Link 2</a>
<a class="link" href="#" data-rel="content3">Link 3</a>
<a class="link" href="#" data-rel="content4">Link 4</a>
<a class="link" href="#" data-rel="content5">Link 5</a>

<div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
    <div id="content4">This is the test content for part 4</div>
    <div id="content5">This is the test content for part 5</div>
</div>

$(".link").click(function() {
    $('.content-container div').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

更可扩展的更新

于 2013-07-29T15:17:08.510 回答
1

您必须隐藏以前的内容。我在您的 div 中添加了一个类fadeContent，然后将其fadeIn放在fadeOut回调中：

小提琴：http: //jsfiddle.net/Wqc9N/5/

代码：

$("#link1").click(function(){
    $(".fadeContent").fadeOut("slow", function() {
        $('#content1').fadeIn('slow');
    });
});
$("#link2").click(function(){
    $(".fadeContent").fadeOut("slow", function() { 
        $('#content2').fadeIn('slow');
    });
});
于 2013-07-29T15:15:50.253 回答
0

您需要隐藏其他元素

$(document).ready(function(){
  $("#link1").click(function(){
     $('#content1').fadeIn('slow');
     $('#content2').fadeOut('slow');
  });
  $("#link2").click(function(){
     $('#content2').fadeIn('slow');
     $('#content1').fadeOut('slow');
  });
});
于 2013-07-29T15:16:28.600 回答
0

检查这个 jsFiddle我添加了 div#content而不是#content1and#content2

content = new Array(); // array to hold your content
content[1] = 'This is the test content for part 1';
content[2] = 'This is the test content for part 2';

$(document).ready(function(){
  $("#link1").click(function(){
     $('#content').html(content[1]) // click link1 load content[1]
  });
  $("#link2").click(function(){
     $('#content').html(content[2]) // click link2 load content[2]
  });
});

我建议向所有链接添加一个类，以便一次将事件附加到所有链接。

于 2013-07-29T15:16:48.707 回答