2010-08-09 51 views
1

我有一個硬編碼的li菜單,它使用filterable.js根據散列標記篩選項目列表。菜單項的頁面加載時的活動類

如果選中該項目,我可以使焦點工作,但是,我希望在頁面加載時選擇所有標記。我添加了「當前」類到「全部」菜單項,但是這不起作用。

見:filterable.js http://thinquetanque.com/portfolio

代碼:

/* 
* Copyright (C) 2009 Joel Sutherland. 
* Liscenced under the MIT liscense 
*/ 

(function($) { 
    $.fn.filterable = function(settings) { 
     settings = $.extend({ 
      useHash: true, 
      animationSpeed: 5000, 
      show: { width: 'show', opacity: 'show' }, 
      hide: { width: 'hide', opacity: 'hide' }, 
      useTags: true, 
      tagSelector: '#portfolio-filter a', 
      selectedTagClass: 'current', 
      allTag: 'all' 
     }, settings); 

     return $(this).each(function(){ 

      /* FILTER: select a tag and filter */ 
      $(this).bind("filter", function(e, tagToShow){ 
       if(settings.useTags){ 
        $(settings.tagSelector).removeClass(settings.selectedTagClass); 
        $(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass); 
       } 
       $(this).trigger("filterportfolio", [ tagToShow.substr(1) ]); 
      }); 

      /* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */ 
      $(this).bind("filterportfolio", function(e, classToShow){ 
       if(classToShow == settings.allTag){ 
        $(this).trigger("show"); 
       }else{ 
        $(this).trigger("show", [ '.' + classToShow ]); 
        $(this).trigger("hide", [ ':not(.' + classToShow + ')' ]); 
       } 
       if(settings.useHash){ 
        location.hash = '#' + classToShow; 
       } 
      }); 

      /* SHOW: show a single class*/ 
      $(this).bind("show", function(e, selectorToShow){ 
       $(this).children(selectorToShow).fadeIn('slow'); 
      }); 

      /* SHOW: hide a single class*/ 
      $(this).bind("hide", function(e, selectorToHide){ 
       $(this).children(selectorToHide).fadeOut('slow'); 
      }); 

      /* ============ Check URL Hash ====================*/ 
      if(settings.useHash){ 
       if(location.hash != '') 
        $(this).trigger("filter", [ location.hash ]); 
       else 
        $(this).trigger("filter", [ '#' + settings.allTag ]); 
      } 

      /* ============ Setup Tags ====================*/ 
      if(settings.useTags){ 
       $(settings.tagSelector).click(function(){ 
        $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]); 

        $(settings.tagSelector).removeClass('current'); 
        $(this).addClass('current'); 
       }); 
      } 
     }); 
    } 
})(jQuery); 


$(document).ready(function(){ 

    $('#portfolio-list').filterable(); 

}); 

被添加和刪除 「當前」 類到我的投資組合項目列表。我確定必須有一個jquery函數來加載一個類,但我還沒有找到它。

任何幫助,將不勝感激。

謝謝!

回答

1

如果你有這樣的:

$(document).ready(function(){ 

    $('#portfolio-list').filterable(); 

}); 

試試這個:

$(document).ready(function(){ 

    $('#portfolio-list').filterable(); 
    $('#portfolio-list').trigger('filter', [ '#all' ]); 

}); 

或許(未經測試)...

$(document).ready(function(){ 

    $('#portfolio-list').filterable(); 
    $("#portfolio-filter li:first a").addClass("current"); 

}); 

這將當前類添加到第一列表元素「全部」頁面加載..不太確定這是否有幫助。

+0

我最終弄清楚了與CSS。我列出的所有名單都不合邏輯,並且干擾了正確的CSS。但感謝您的意見。 – Jason 2010-08-10 00:33:23