Question

我有一个jQuery标签/内容切换器，我试图允许使用后退按钮。

<script type="text/javascript">
$(function(){
    $('#gallery').css("display", "block");               //show first tab
    $(".tabs nav a").on("click", function(event){       //click a tab
        $('.tabs .tabContent').css("display", "none");  //hide all content boxes
        var clickedTab = $(this).attr('href');           //get the id from the href
        $(clickedTab).fadeIn();                          //show that content
        return false;
    });
});
</script>

目前，ahref转到#gallery，＃recipes等，但这并没有显示在浏览器的URL栏中，因为我使用了return false来阻止页面跳转。

我希望人们能够点击标签，或者链接到页面中其他位置的其他标签，并且能够使用他们的后退按钮。我怎么做到这一点？

Answer 1

网上有许多有用的插件可以帮助您实现此功能，而不会非常疯狂。有些人使用浏览器历史记录，而其他人更现代化，并利用本地存储，会话等新技术。

话虽如此，我知道在堆栈上发布这样的问题并得到这样的回复是多么令人沮丧，所以...我继续并重写了大部分代码来帮助你实现你的目标是做。请注意，下面的代码不应被视为一个完全“完全证明”的解决方案，因为它有各种浏览器等自己的垮台。但是，试一试，看看这是否适合你，这样你就可以继续做什么这是你需要做的。

$(function () {
            var app = {
                    vars: {
                        gallery: $('#gallery'),
                        tabContent: $('.tabs .tabContent'),
                        nav: $('.tabs nav a')
                    },
                    events: function () {
                        //tabs
                        app.vars.nav.on('click', function (e) {
                            var thisHash = $(this).attr('href');
                            app.setHash(thisHash);
                            e.preventDefault();
                        });

                        //hashchange
                        $(window).on('hashchange', function() {
                            app.checkHash();
                        });

                    },
                    checkHash: function () {
                        var hash = app.getHash();

                        if (hash == '') {
                            app.vars.tabContent.hide();
                            app.vars.gallery.show();
                        } else {
                            app.goTo(hash);
                        }

                    },
                    getHash: function () {
                        return window.location.hash;
                    },
                    setHash: function (id) {
                        window.location.hash = id;
                    },
                    goTo: function (id) {
                        app.vars.tabContent.hide();
                        $(id).fadeIn();
                    }
                }
            app.events();
            app.checkHash();
        });

粘贴所有这些而不是上面的js，它应该按预期运行。

简而言之，整个事件序列（点击和/或浏览器后退/前进）取决于'hashchange'事件。它指定应该发生什么以及如何发生。

再一次，这可以解决您的问题，但是，请查看一些更强大的应用程序，这些应用程序更先进，能够在许多不同的浏览器上运行。

希望这会有所帮助：）

jQuery选项卡，切换内容 - 如何不打破后退按钮？

1 个答案: