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配置しました。fadeInfadeOut

フィドル: 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

andの代わりにdiv を追加したこの jsFiddleを確認してください#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]
  });
});

すべてのリンクにクラスを追加して、一度にすべてのリンクにイベントを添付することをお勧めします。

于 2013-07-29T15:16:48.707 に答える