Активный класс при загрузке страницы пункта меню - PullRequest
Новая
       10

Активный класс при загрузке страницы пункта меню

1 голос
/ 09 августа 2010

У меня есть жестко запрограммированное меню li, которое использует filterable.js для фильтрации списка элементов на основе хеш-тегов.

Я могу заставить фокус работать, если выбран элемент, однако я хочу, чтобы тег all был выбран при загрузке страницы. Я добавил класс «текущий» в пункт меню «все», однако это не сработало.

см .: http://thinquetanque.com/portfolio

код для filterable.js: 

/*
* 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 Ответ

1 голос
/ 09 августа 2010

Где у вас это: 

$(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");

});

Это добавиттекущий класс для первого элемента списка «Все» при загрузке страницы. Не совсем уверен, помогает это или нет.

...