jQuery hashchange 插件问题

发布于 2024-10-20 23:11:06 字数 3041 浏览 5 评论 0 原文

我对 Ben Alman 的 hashchange 事件插件 和我的自定义 Tabs_Plugin 有疑问。每次触发 hashchange 事件或单击选项卡链接时,页面都会跳转到页面顶部。

通常,我只需在链接中添加 return falseevent.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);

i've an issue with Ben Alman's hashchange event plugin and my custom Tabs_Plugin. Every time the hashchange event was triggered or i've clicked a tab link the page jumps to the top of the page.

Normally i solve those problems simply by adding return false or event.preventDefault to the links but in this case it is not working for me.

If i add return false the whole plugin stops to work. Take a look: http://gearsdigital.com/sandbox/usecase/tabs/

Here is the relevant plugin code. I've included the hashchange plugin above (not included here).

// 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

狠疯拽 2024-10-27 23:11:06

将 Jquery Tools tabs 插件历史插件 也来自 Jquery Tools。

What about using Jquery Tools tabs plugin with the history plugin also from Jquery Tools.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文