Question

我使用Jquery地址构建了一个简单的深层链接页面，并遵循以下示例：
http://www.asual.com/jquery/address/samples/state/

现在在此示例中，HTML5浏览器（我使用Chrome 10）显示实际显示的来源。即http://www.asual.com/jquery/address/samples/state/portfolio在Portfolio content. div中显示content，即使该内容是通过Jquery地址/ Ajax / $('.content').html()插入的。我重建了这个例子，但在我的页面上，源代码始终是初始页面之一，在执行任何Ajax之前。这与非HTML5浏览器中的行为相同我做错了什么？
谢谢提示，
托马斯

编辑：

以下是演示代码：

<script type="text/javascript"> 

        $.address.init(function() {

            // Initializes the plugin
            $('.nav a').address();

        }).change(function(event) {

            // Selects the proper navigation link
            $('.nav a').each(function() {
                if ($(this).attr('href') == ($.address.state() + event.path)) {
                    $(this).addClass('selected').focus();
                } else {
                    $(this).removeClass('selected');
                }
            });

            // Handles response
            var handler = function(data) {
                $('.content').html($('.content', data).html()).show();
                $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
            };

            // Loads the page content and inserts it into the content area
            $.ajax({
                url: $.address.state() + event.path,
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    handler(XMLHttpRequest.responseText);
                },
                success: function(data, textStatus, XMLHttpRequest) {
                    handler(data);
                }
            });
        });

        // Hides the tabs during initialization
        document.write('<style type="text/css"> .content { display: none; } </style>');

    </script>

我非常相同。我删除了链接突出显示，更改了URL以匹配我的网站并更改了Ajax调用，因为我正在加载html。我想知道它是否还有“更多东西”（比如文档中没有真正谈到的必要的.htaccess，但我在项目的GitHub中找到了它。）

这是我的代码：

$.address.init(function(event) {
        $('#blogMenu a').address();
        $('#blogBottomMenu a').address();
        $('.linkleiste a').address();
}).change(function(event) {
        var value = $.address.state().replace(/^\/$/, '') + event.value;
  value = value.replace(/^\/blog\//,'');
  value = value.replace(/_/,'');
        var teile = value.split('/');
        var name = '';
        var thema = '';
        if(teile[0]) name = teile[0];
        if(teile[1]) thema = teile[1];
        $('#blog').hide();
            if(!value.match(/ADFRAME/)) {
                $(document).scrollTo('#aufmacher','fast');
                $('#blogMenu').load('/snp/blog_menu.snp',{A_NAME:name,ETIKETT:thema,id:id});
                $('#blog').load('/blog/article.snp',{A_NAME:name,ETIKETT:thema,id:id},function() {
                    $('#blog').show();
                });
            }
            else {
                $('#blog').fadeIn('fast');
            }

    });

Answer 1

如果您要设置一个演示供我们查看，那会更有帮助。但是通过查看代码，您需要确保在加载所有内容之前触发事件。

$(function () { // NOT $(document).ready(function () {});
    $.address.init();
});

此外，您可能必须在没有哈希时触发哈希更改。

$(function () {
    $.address.init();
    $.address.change(); // Triggers hash change when there is no hash!
});

通过查看代码，看起来他们使用的是与您不同的布局。

var init = true,
state = window.history.pushState !== undefined;

// Handles response
var handler = function (data) {
    $('title').html($('title', data).html());
    $('.content').html($('.content', data).html());
    $('.page').show();
    $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
};

$.address.state('/jquery/address/samples/state').init(function () {

    // Initializes the plugin
    $('.nav a').address();

}).change(function (event) {

    // Selects the proper navigation link
    $('.nav a').each(function () {
        if ($(this).attr('href') == ($.address.state() + event.path)) {
            $(this).addClass('selected').focus();
        } else {
            $(this).removeClass('selected');
        }
    });

    if (state && init) {

        init = false;

    } else {

        // Loads the page content and inserts it into the content area
        $.ajax({
            url:$.address.state() + event.path,
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                handler(XMLHttpRequest.responseText);
            },
            success:function (data, textStatus, XMLHttpRequest) {
                handler(data);
            }
        });
    }

});

if (!state) {

    // Hides the page during initialization
    document.write('<style type="text/css"> .page { display: none; } </style>');
}

如果你设置了一个演示版，我会更新我的答案。

地址状态混乱

1 个答案: