jQueryを使用して現在のページ/タブのdivクラスにエフェクトを適用

Question

ナビゲーションバーに3つの葉がthis pageにあります。各葉のセクションは絶対配置と異なるZ-インデックスを持つdivクラスからなるnavリンクですので、茶色の上に緑色の葉をフェードインできます。

また、ページを変更するためにハッシュ変更を使用するCSS tricksの動的ページ変更方法に基づくページ間のフェーディング遷移もあります。

ナビゲーションバーのリーフのフェードに関連するすべてのコードをthis jsfiddleに見ることができます（このスクリプトには、ページ間のトランジションのコードも含まれています）。

私が苦労している部分は、現在のページのdivクラス ".current"（退色している​​緑色の葉が含まれています）を参照する方法です。 Webページが最初に開かれたとき、ホームページまたは約ページのいずれかで、現在のページの緑の葉がページがロードされるときに不透明度：1に設定されるように、これを行う必要があります（これは、ユーザーがページをクリックして読み込みますが、ページが最初に読み込まれたときには表示されません）。

各ページのCSSで.currentクラスの不透明度を設定できますが、hashchangeメソッドを使用すると＃メインコンテンツのHTMLだけが変更されるため、これは機能しません。私は私のjavascriptでこれを設定する方法を見つけ出す必要があると推測し、何とか現在のページ/タブを参照します。

これは、.close div/linkのクリックハンドラで現在のページの緑の葉の不透明度を変更する方法です。つまり、ホームページがアクティブなときに連絡先フォームが閉じられている場合、緑の葉はフェードイン（現在のページのように）し、同じことは約ページと同じです。ここでも、クリックハンドラの現在のページ/タブを参照する方法を見つける必要があるようです。

誰かが私にこれを手伝ってもらえますか？

おかげで、

ニック

Answer 1

うわーそれは混乱して、 それはあなたの状況を複雑以上のように思えます。 ページ固有のCSSなどは必要ありません。別の時刻に.currentクラスを設定するだけで済みます。

誰かがあなたのウェブサイトに移動したときに、＃タグが読み込まれているか、何もないことがわかります。

基本的に、ページが読み込まれると、そこにハッシュタグがあるかどうか、そしてそれが正しいかどうか（実際のページをあなたが占めているかどうか）、ハッシュタグを参照する必要があります瞬間だけでなく、葉を強調表示します。

あなたは実際には「葉」は、あなたが情報をロードするときにのみ「現在」で本当に.current葉の上

をあなたの全体のことを簡素化することができます。したがって、$ wrapperの中に情報がロードされて配置されると、フェードインしてアニメーション化されます。 .currentを次に置いてください。

コメントあなたが明確化や作業の例:)

---

アップデートが必要な場合 - 迅速な解決

http://jsfiddle.net/6p2f6/1/
を基本的に私は.currentを変更するものがに葉に移動ハッシュ変更 と私は、ユーザーがハッシュを使用してページに移動したかどうかをチェックするようにしました。 その完璧ではありませんが、私はその時にできる最高のものです。それが役に立てば幸い！あなたが明確化以上の例

---

を必要とする場合

は再びコメント更新 - 新しいコード:)

http://www.mediafire.com/?51vajskfeu923

私はチャックできなかったので、いくつかのファイルがあります。それはJSfiddleで

右そう、私は共同フェードメニュー全体が機能するようにはしませんが、通常のホバーのように表示/非表示にしています。私は後でそれを見ることができますが、あなたがそれを行う方法を知っているので、私はあなたがそれを理解できると仮定しています。ただ、JavaScriptのファイルに移動し、これを探して：

$this = $(this); 
     var currentHash = window.location.hash; 
     console.log('specialMenu this.each(this) = '+$this.attr('href')); 
     //append all images 
     $this.append('<img class="defaultImage" src="'+settings.defaultImage+'"/>') 
     .append('<img class="hoverImage" src="'+settings.hoverImage+'"/>') 
     .append('<img class="activeImage" src="'+settings.activeImage+'"/>'); 

     //prepare positioning 
     $('.defaultImage').css({ 
      'z-index':'1' 
     }); 
     $('.activeImage').css({ 
      'z-index':'2' 
     }); 
     $('.hoverImage').css({ 
      'z-index':'3' 
     }); 
     //Make parent correct height 
     $this.height($this.find('img').height()); 

     //check what hash value is loaded 
     if(currentHash == $this.attr('href')){ 
      $this.find('img:not(.activeImage)').hide(); 
      $this.find('img.activeImage').show(); 
     }else{ 
      $this.find('img:not(.defaultImage)').hide(); 
      $this.find('img.defaultImage').show(); 
     } 
     $(this).hover(function(){ 
      currentHash = window.location.hash; 
      $(this).find('img:not(.hoverImage)').hide(); 
      $(this).find('img.hoverImage').show(); 
     },function(){ 
      currentHash = window.location.hash; 
      if(currentHash == $(this).attr('href')){ 
       $(this).find('img:not(.activeImage)').hide(); 
       $(this).find('img.activeImage').show(); 
      }else{ 
       $(this).find('img:not(.defaultImage)').hide(); 
       $(this).find('img.defaultImage').show(); 
      } 
     }); 
    }); 
}, 

今のメインページにそれを設定するために、このコードを見て：

 $('#contentContainer').jdAjaxContent({ 
      'defaultPage': 'home', 
      'pathToLoadGif' : 'ajaxloading.gif' 
     }); 
     $("#destroy").click(function(){ 
      console.log('destroy.click'); 
      $(this).jdAjaxContent('destroy'); 
     }); 

     //had to put this in its own window load, not sure why; weird bug 
     $(window).load(function(){ 
      console.log('specialMenu.click'); 
      $('a[href^=#]').jdAjaxContent('specialMenu', 
       { 
        'defaultImage': 'MenuIcons-01.png', 
        'hoverImage' : 'MenuIcons-02.png', 
        'activeImage' : 'MenuIcons-03.png' 
       }); 
     }); 

だけを取り除くことを、破壊するビットを無視プラグイン。それを取り出す。

$('#contentContainer').jdAjaxContent({ 
      'defaultPage': 'home', 
      'pathToLoadGif' : 'ajaxloading.gif' 
     }); 

$（「＃のcontentContainer」）でのあなたの興味は、デフォルトのページヘクタール
pageToLoadGifは通常、ほとんどのローディングGIFへのパスです
デフォルトのページにあなたのAjaxの負荷コンテナです表示されます。

今、あなたはまた、これはあなたの小さなメニューのことを行うビットである

$('a[href^=#]').jdAjaxContent('specialMenu', 
       { 
        'defaultImage': 'MenuIcons-01.png', 
        'hoverImage' : 'MenuIcons-02.png', 
        'activeImage' : 'MenuIcons-03.png' 
       }); 

を見てする必要があります。 あなたはそれぞれを個別に行う必要があります異なるイメージを持っているので、このような何か：

$('a[href^=#]').each(function(){ 
    $(this).jdAjaxContent('specialMenu', 
       { 
        'defaultImage': $(this).attr('defaultImage'), 
        'hoverImage' : '$(this).attr('hoverImage'), 
        'activeImage' : $(this).attr('activeImage') 
       }); 
       }); 

は、その後、あなたに=「何とか」defaultImageを置くので、それは何
ALSO

のようになります。すべての 'console.log'を '//console.log'に置き換えて、実際のWebサイトにすべてのコンソール項目が表示されないようにします。

私は、自分のAjaxエンジンを書くのがとても面白いと思っています。バグが見つかったり、mr.jackdavis@gmailでコメントやメールを送ったりする必要がある場合は、comの

Answer 2

私はあなたが準備イベント関数の内部で

$(document).ready(function() { 
    $(window).trigger('hashchange'); 
});