Question

我尝试将nav移到包装器顶部，加载href'ed侧并在此之后加载内容。目前，它只是向上移动并加载index.html的内容，但它不会加载给定的链接。为什么呢？

HTML：

    <nav id="main_navigation">
        <ul>
            <li id="nav_1"><a href="portfolio.htm">portfolio</a></li>
            <li id="nav_2"><a href="about.htm"></a></li>
            <li id="nav_3"><a href="blog.htm"></a></li>
            <li id="nav_4"><a href="contact.htm"></a></li>
        </ul>
    </nav>

    <section id="content"></section>

    <section id="footer">
        <section id="back"></section>
    </section>

jQuery的：

jQuery.fn.center = function (centerCallback) { 

    this.css("position","absolute"); 
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); 
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); 

    if(centerCallback != undefined){    
        centerCallback(this);   
        return this;    
    } 
}

var navi_switch = true; 
var content_container = 'test'; 

$(document).ready(function(){    

    $('#wrapper').center(function(){ 

        $('#main_navigation').css("top", ( >parseInt($('#main_navigation').parent().height()) - >parseInt($('#main_navigation').height()) ) / 2 + "px");    
        });

        $('#main_navigation a').click(function(){

            var attr = $(this).attr('href');    

            if(navi_switch){

                $('#main_navigation').animate({
                    top: '0', duration: 'slow'},500,function(){
                        navi_switch = false;
                        $('#content').load(attr);        
                    });     
            }
            else{
                $('#content').load(attr);           
            }
        }
}

有谁知道我错在哪里或出了什么问题？

Answer 1

attr超出了animate函数的范围。将其移至与navi_switch相同的范围，或者您可以尝试this approach。

Answer 2

这里的关键是http://api.jquery.com/event.preventDefault/，它会阻止链接的默认操作发生（即，获取href属性中的页面）。

您可以将事件传递给click-callback，从而使event.preventDefault（）可以调用。我稍微清理了你的代码，将代码包含在IIFE（http://benalman.com/news/2010/11/immediately-invoked-function-expression/）中，并且还添加了此代码所需的小代码片段。工作。您的代码也缺少click()和$(document).ready()的关闭，所以我也添加了它。

(function($) {
    jQuery.fn.center = function(centerCallback) {
        this.css("position", "absolute");
        this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
        this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
        if (centerCallback != undefined) {
            centerCallback(this);
            return this;
        }
    }

    var navi_switch = true;
    var content_container = 'test';
    $(document).ready(function() {
        $('#wrapper').center(function() {
            $('#main_navigation').css("top", ( > parseInt($('#main_navigation').parent().height()) - > parseInt($('#main_navigation').height())) / 2 + "px");
        });
        $('#main_navigation a').click(function(e) {
            var attr = $(this).attr('href');
            if (navi_switch) {
                $('#main_navigation').animate({
                    top: '0',
                    duration: 'slow'
                }, 500, function() {
                    navi_switch = false;
                    $('#content').load(attr);
                });
            } else {
                $('#content').load(attr);
            }
            e.preventDefault();
        });
    });
})(jQuery);

IIFE / iffy-part是包装代码的整个(function($) {})(jQuery);内容。简而言之，这确保了$实际上是脚本中的jQuery，以防你加载另一个脚本。它还有助于将函数和变量保留在全局窗口命名空间之外，这是一件好事;）

jQuery不会href

2 个答案: