1

私は今日のほとんどを研究してきましたが、あまり見つかりませんでしたので、皆さんが助けてくれるかどうか疑問に思いました。

2つのdivを制御したい2つのリンクがあります。リンクをクリックすると、それぞれのdivが表示され、そのリンクでクラス「link-active」がアクティブになるようにします。他のリンクをクリックすると、古いdivがフェードアウトし、新しいリンクに関連する新しいdivがフェードインして、「link-active」クラスを再適用します。

HTML：

<a href="#walking" id="walking" class="link-active"><p>Dog Walking</p></a>
<a href="#grooming" id="grooming"><p>Dog Grooming</p></a>

<div class="walk"></div>
<div class="groom"></div>

私はこれがおそらく最良の説明ではないことを理解しているので、ここに私を助けるためのフィドルがあります。

フィドル： http： //jsfiddle.net/swift29/LUkk4/1/

よろしくお願いします

4

2 に答える 2

0

ドキュメントの準備完了イベントで、次のコードを追加して、説明されている動作を実現します

$('#walking').click(function()
{
   $('.groom').fadeOut(100, function() 
   {
        $('.groom').removeClass('link-active');
        $('.walk').fadeIn(100, function()
        {   
            $('.walk').addClass('link-active');
        });
   });
   //prevent default click event
   return false;
});

同じイベントを他のdivに追加し、.walkクラス名と.groomクラス名を置き換えるだけです。

于 2013-01-06T16:06:20.543 に答える
0

このソリューションでは、単純な関数を使用してfadeIn/fadeOutを処理します。コードの重複を可能な限り排除しようとします。

Javascript

$("#walking").click(function(){
    swap(this, "walk", "groom");
});

$("#grooming").click(function(){
  swap(this, "groom", "walk");
});

function swap(obj, active, inactive){
  $("." + inactive).fadeOut(500, function(){
      $("." + active).fadeIn().addClass("link-active");
  });
  $("#walking, #grooming").removeClass("link-active");
  $(obj).addClass("link-active");
}

実例：http：//jsfiddle.net/LUkk4/6/

于 2013-01-06T16:09:00.013 に答える