0

我有一个 jQuery 选项卡/内容切换器，我正在尝试允许使用后退按钮。

JSFIDDLE：http: //jsfiddle.net/k6CvX/

<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 来阻止页面跳转。

我希望人们能够单击选项卡或指向页面中其他位置的另一个选项卡的链接，并能够使用他们的后退按钮。我将如何实现这一目标？

4

1 回答 1

3

网络上有很多很多有用的插件可以帮助你实现这个功能而不会发疯。一些利用浏览器历史记录，而另一些则更现代，并利用本地存储、会话等新技术。

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

$(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'事件。它指定应该发生什么以及如何发生。

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

希望这可以帮助 ：）

于 2013-08-21T15:40:08.780 回答