Question

我想在点击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/

有人可以帮忙吗？

Answer 1

您需要制作内容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');
});

Updated fiddle

要减少添加/删除链接时所需的维护量，请尝试使用以下方法，使用类使元素更通用，并使用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');
});

More extensible update

Answer 2

您必须隐藏以前的内容。我在fadeContent的div中添加了一个类，然后将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');
    });
});

Answer 3

您需要隐藏其他元素

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

Answer 4

检查this jsFiddle我添加了div #content而不是#content1和#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]
  });
});

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

jQuery替换内容而不是淡入淡出

4 个答案: