使用jQuery將效果應用於當前頁面/選項卡的div類

Question

我在我的導航欄中有三個葉子this page。每個葉子部分都是一個導航鏈接，由具有絕對定位和不同z索引的div類組成，這樣我就可以淡入棕色的綠色葉子。

頁面之間也存在淡入淡出的過渡，它基於CSS tricks上的動態頁面更改方法，該方法使用hashchange來更改頁面。

你可以看到所有代碼相關的導航欄上的葉子上this jsfiddle的衰落（腳本還包含了網頁之間的轉換代碼）。

我正在努力的部分是如何引用當前頁面的div類「.current」（其中包含淡入和淡出的綠色葉子）。我需要這樣做，以便首次打開網站時，無論是在主頁還是關於頁面，當前頁面的綠色頁面都設置爲opacity：1，因爲頁面已加載（這是在用戶點擊一個頁面來加載它，但不是當頁面第一次加載時）。

我可以在CSS中爲每個頁面設置.current類的不透明度，但是使用hashchange方法，只有＃main-content的HTML被更改，所以這不起作用。我認爲我需要找到一種在我的javascript中設置這種方式，以某種方式指向當前頁面/選項卡。

與此相關的是我如何更改.close div/link的點擊處理程序中當前頁面的綠色葉子的不透明度，即如果在主頁處於活動狀態時關閉聯繫表單，主頁綠葉會淡入（因爲它是當前頁面），並且與關於頁面相同。同樣，我似乎需要找到一種方式來引用點擊處理程序中的當前頁面/選項卡。

有人可以幫助我嗎？

感謝，

尼克

Answer 1

哇，這是混亂的， 好像你對局勢的複雜化。 你不需要頁面特定的CSS或類似的東西，你只需要在不同的時間設置.current類。

當有人導航到您的網站時，您將知道他們正在加載的＃標籤，或者沒有任何標籤。

現在，基本上在頁面加載時，你需要看一下hashtag，如果那裏有一個，如果它是正確的（因爲它是一個實際的頁面，你已經佔了），那麼你只需像你一樣加載該頁面此刻，也突出了葉子。

其實你可以簡化在.current葉

你整個事情的真一「葉」僅僅是「當前」當你加載信息。所以當信息被加載並放入你的$ wrapper時，淡入並動畫;然後把你的電流。

評論，如果你需要澄清或工作的例子:)

---

更新 - 快速解決方案

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」）是容器，你的AJAX加載到
默認頁面默認頁面公頃
pageToLoadGif是通向小加載GIF即通常顯示。

現在，你還需要看看

$('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'，以便所有控制檯的東西都不會出現在您的實際網站上。

我希望這會有所幫助，如果您發現任何錯誤或需要更多幫助，請發送郵件至mr.jackdavis@gmail，我發現編寫自己的ajax引擎非常有趣。COM

Answer 2

我想你應該換行

$(window).trigger('hashchange'); 

ready事件函數內

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