jQuery hashchange 插件问题
我对 Ben Alman 的 hashchange 事件插件 和我的自定义 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);
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
将 Jquery Tools tabs 插件 与 历史插件 也来自 Jquery Tools。
What about using Jquery Tools tabs plugin with the history plugin also from Jquery Tools.