У меня проблема с плагином Бена Алмана и моим пользовательским 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);