【发布时间】:2011-03-09 16:28:31
【问题描述】:
我对 Ben Alman 的 hashchange event plugin 和我的自定义 Tabs_Plugin 有疑问。每次触发 hashchange 事件或单击标签链接时,页面都会跳转到页面顶部。
通常我只需在链接中添加return false 或event.preventDefault 即可解决这些问题,但在这种情况下它对我不起作用。
如果我添加return false,整个插件将停止工作。看一看:http://gearsdigital.com/sandbox/usecase/tabs/
这里是相关的插件代码。我已经包含了上面的 hashchange 插件(这里不包含)。
// hashchange plugin here
(function ($) {
var tabs = {
init : function (element, options) {
tabs.menu(element, options);
tabs.navigation(element, options);
$(window).hashchange();
},
// Build tab navigation from headlines
menu : function (element, options) {
var menulist = '';
element.find(options.menusource).each(function () {
var el = $(this), plaintext = el.text(), parent = el.parent(), itemID = plaintext.split(" ").join("").toLowerCase();
menulist += '<li><a href="#' + itemID + '">' + plaintext + '</a></li>';
parent.attr('id', itemID);
});
element.prepend('<ul class="' + options.menuclass + '">' + menulist + '</ul>');
element.find(options.tabbody).wrapAll('<div class="'+options.wrapperclass+'"></div>');
},
navigation : function (element, options) {
$(window).hashchange(function () {
var menu = $('.' + options.menuclass);
var hash = location.hash || menu.find('a:first').attr('href');
if (hash) {
menu.find('a').each(function () {
var that = $(this);
that[that.attr('href') === hash ? 'addClass' : 'removeClass'](options.currentclass);
});
tabs.hidetab(element, options);
tabs.showtab(element, hash, options.onShow);
} else {
menu.find('a:first').addClass(options.currentclass);
}
});
},
showtab : function(element, hash, onShow){
element.find(hash).show(0, onShow);
},
hidetab: function(element, options){
element.find(options.tabbody).hide();
}
};
$.fn.extend({
cctabs: function (config, onShow) {
var defaults = {
wrapperclass: 'tab-content',
currentclass: 'current',
menuclass : 'tabmenu',
menusource: 'h2',
tabbody: '.tab',
onShow: null
};
var options = $.extend(defaults, config);
return this.each(function () {
var element = $(this);
tabs.init(element, options);
});
}
});
})(jQuery);
【问题讨论】:
标签: jquery plugins tabs hashchange