jQuery:哈希之前的绝对路径名

jQuery: absolute pathname before hash

本文关键字:路径名 哈希之 jQuery      更新时间:2023-09-26

我目前在我设置的哈希更改函数和jQuery mobile(用于滑动页面过渡)之间遇到了一些冲突。
为了演示一下,这是我服务器上的一个独立演示:http://nealfletcher.co.uk/transition/
单击transition click,该页面将滑动到其中,因为它应该并相应地附加URL:/transition/news

这就是问题所在,单击news hash click,这将触发我的哈希更改函数并加载相关的div,但网址不是这样:/transition/news/#news-01 url 呈现得如此/transition/#news-01这会导致导航到 url 时出现问题。
有没有办法强制在哈希之前添加/news/,所以我得到/transition/news/#news-01而不是/transition/#news-01
相关的jQuery如下,是否可以在哈希之前附加/news/
任何建议将不胜感激!

j查询:

$(document).ready(function () {
    $(window).hashchange(function () {
        var hash = location.hash;
        if (hash) {
            var element = $('.click-block[data-hook="' + hash.substring(1) + '"]');
            if (element) showDetail(element);
        }
    });
    $(document).ready(function () {
        $(document).hashchange();
        var $container = $('#main-grid, #news-grid');
        $(function () {
            $container.imagesLoaded(function () {
                $container.isotope({
                    itemSelector: '.grid-block, .grid-break, .hidden',
                    animationEngine: 'best-available',
                    filter: '*:not(.hidden), .grid-block',
                    masonry: {
                        columnWidth: 8,
                        gutterWidth: 25
                    }
                });
            });
        });
        $(".click-block").click(function () {
            document.location.hash = $(this).attr('data-hook');
        });
    });

    function showDetail(element) {
        var newHeight = $('#post-' + element.attr('data-hook')).height();
        $('#post-' + element.attr('data-hook')).removeClass('hidden').addClass('grid-break').delay(300).fadeIn('slow');
        newHeight = (Math.floor((newHeight + 10) / 230) + 1) * 230 - 10;
        $('#post-' + element.attr('data-hook')).css('height', newHeight);
        element.children('.up-arrow').fadeIn('slow');
        setTimeout(function () {
            $('html, body').animate({
                scrollTop: $('#post-' + element.attr('data-hook')).offset().top - 90
            }, "slow");
        }, 1500);
        $('#main-grid').isotope();
        $('#news-grid').isotope();
    }

只需在数据钩子属性中添加该部分即可。因此,对于您的新闻链接,它们将以新闻/为前缀data-hook="news/news-01"

现在,我建议您考虑使用类似 http://backbonejs.org/#Router 的东西来执行您正在做的事情。或者至少看看 https://github.com/browserstate/history.js/