jQuery替换内容而不是褪色

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

您必须隐藏以前的内容。我添加了一个类你的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 2

你需要隐藏其他元素

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

Answer 3

检查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] 
    }); 
}); 

我建议增加一个班的所有链接到事件一次连接到所有的人。

Answer 4

你需要使内容的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