Question

我还处于ajax和脚本编写的学习阶段。我最近偶然发现这个网站http://www.maisonbertine.com/发现使用这个脚本加载菜单和内容非常有趣。

我试图在我的测试网站http://www.ztest.ca上学习和模仿代码，但我无法让它工作。如果有效，它应该从www.ztest.ca/en/en.html

加载Left Menu和Right Main H1

单击语言链接后，它不会将URL更改为www.ztest.ca/en/所以我猜pushState方法没有执行。 Firefox控制台也显示POST ztest.ca/en/ [HTTP / 1.1 200 OK 209ms]。

以下是当前代码：

语言选择容器：

<div id="container"><aside id="leftsidebar" class="is-white is-left"></aside>
    <div class="lang" id="lang">
        <div class="lang_logo"></div>
        <div class="lang_selection" id="lang_selection">
            <ul>
                <li><a href="/en/">English</a></li>
                <li><a href="/fr/">Français</a></li>
            </ul>
        </div>
    </div>
</div>

用于执行TweenMax动画的脚本：

<script>window.jQuery || document.write('<script src="/js/libs/jquery-1.11.0.min.js"><\/script>')</script>        
<script src="/js/libs/TweenMax.min.js"></script>
<script src="/js/libs/CSSPlugin.min.js"></script>
<script src="/js/script.js"></script>
<script>
    $(function () {
        if($(document).width()<736){
            return false;
        }
        var tween1 = new TimelineMax();
        tween1.add([
            TweenMax.to("#lang", 1.3, {delay: 1, z: 0, left: 160, autoAlpha: 1, ease: Expo.easeOut,force3D:true}),
        ]);
        tween1.add([
            TweenMax.to("#lang_selection", 0.5, {z: 0, left: 160, ease: Expo.easeOut, force3D:true})
        ]);
        $lang = $('#lang_selection');
        $lang.on('click', 'a', function(e){
            e.preventDefault();
            $a = $(this);
            var href= $a.attr('href');
            $.ajax({
                url:href,
                type:'post',
                dataType:'json',
                success: function(response){
                    $html = $(response.page.html);
                    $wrapright = $($html[0]);
                    var nav = response.mainnav;
                    $container = $('#container');
                    $container.prepend($wrapright);
                    $('#leftsidebar').html(nav);
                    if(Modernizr.history){
                        window.history.pushState({href:'/'},'','/');
                        window.history.pushState({href:href},'',href);
                        document.title = response.page.seotitel;
                    }
                    tween1.add([
                        TweenMax.to("#lang_selection", 0.8, {z: 0, left: 0, ease: Expo.easeOut,force3D:true})
                    ]);
                    tween1.add([
                        TweenMax.to("#lang", 0.8, {z: 0, left: -200, ease: Expo.easeOut,force3D:true})
                    ]);
                    tween1.add([
                        TweenMax.to("#leftsidebar", 1.5, {z: 0, left: 0, ease: Expo.easeOut,force3D:true})
                    ]);
                    tween1.add([
                        TweenMax.to("#overlay", 0.9, {z: 0, autoAlpha: 1,force3D:true})
                    ]);
                    tween1.add([
                        TweenMax.to("#main h1", 2, {z: 0, top: '25%', autoAlpha: 1, ease: Expo.easeOut,force3D:true}),
                    ]);
                }
            });
        });
    });
 </script>

我认为问题出现在这里：

    $lang = $('#lang_selection');
    $lang.on('click', 'a', function(e){
        e.preventDefault();
        $a = $(this);
        var href= $a.attr('href');
        $.ajax({
            url:href,
            type:'post',
            dataType:'json',
            success: function(response){
                $html = $(response.page.html);
                $wrapright = $($html[0]);
                var nav = response.mainnav;
                $container = $('#container');
                $container.prepend($wrapright);
                $('#leftsidebar').html(nav);
                if(Modernizr.history){
                    window.history.pushState({href:'/'},'','/');
                    window.history.pushState({href:href},'',href);
                    document.title = response.page.seotitel;
                }

请帮我找到我在这里犯的错误。谢谢！

这个脚本我做错了什么？

0 个答案: