菜单项的页面加载时的活动类
问题描述:
我有一个硬编码的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函数来加载一个类,但我还没有找到它。
任何帮助,将不胜感激。
谢谢!
答
如果你有这样的:
$(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");
});
这将当前类添加到第一列表元素“全部”页面加载..不太确定这是否有帮助。
我最终弄清楚了与CSS。我列出的所有名单都不合逻辑,并且干扰了正确的CSS。但感谢您的意见。 – Jason 2010-08-10 00:33:23