尝试这个:
HTML:
<a class="link" href="#" data-rel="content1">Link 3</a>
<a class="link" href="#" data-rel="content2">Link 4</a>
<a class="link" href="#" data-rel="content3">Link 5</a>
<a class="link" href="#" data-rel="content4">Link 6</a>
<a class="link" href="#" data-rel="content5">Link 7</a>
<div class="content-container">
<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 id="content6">This is the test content for part 6</div>
<div id="content7">This is the test content for part 7</div>
</div>
CSS:
.content-container {
position: relative;
width: 400px;
height: 400px;
}
.content-container div {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
脚本:
$(".link").click(function(e) {
e.preventDefault();
$('.content-container div').fadeOut('slow');
$('#' + $(this).data('rel')).fadeIn('slow');
});
小提琴