JQuery не будет href - PullRequest
Новая
       27

JQuery не будет href

0 голосов
/ 12 июля 2011

Я пытаюсь переместить мой 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);           
            }
        }
}

Кто-нибудь знает, где я не прав или что не так?

Ответы [ 2 ]

0 голосов
/ 12 июля 2011

Ключ здесь http://api.jquery.com/event.preventDefault/, который останавливает действие по умолчанию ваших ссылок (то есть получение страницы в атрибуте href).

Вы можете передать событие вобратный вызов click, что делает возможным вызов метода 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 в вашем скрипте, на случай, если вы загрузите другойтакже помогает хранить функции и переменные вне пространства имен глобального окна, что очень хорошо;)

0 голосов
/ 12 июля 2011

attr находится вне области действия функции animate. Переместите его в ту же область, что и navi_switch, или вы можете попробовать этот подход .

...