Изменение страницы с помощью JQuery

Итак, я пытаюсь использовать хеши для анимации со страницы на страницу. Первая страница, загружающая (домой), идеально подходит, но страница, к которой я пытаюсь перейти, протестировать (посмотреть на хэш-материал), не будет анимировать/загружать вообще. Почему это?Изменение страницы с помощью JQuery

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 
    <title>Jack Cook</title> 
    <style> 
    #navbar ul { 
     list-style-type: none; 
     display: block; 
     text-align: center; 
    } 

    #navbar ul li { 
     display: inline-block; 
    } 

    #navbar img { 
     width: 64px; 
     height: 64px; 
     padding: 0 10px 0 10px; 
    } 

    #navbar a img:hover { 
     opacity: 0.4; 
    } 
    </style> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     pages = { 
     "home": ["Home", "This is my homepage!", "<p>Homepage</p>"], 
     "test": ["Test", "This is a testing page", "<p>Testing</p>"] 
     }; 

     page = window.location.hash != "" ? window.location.hash.substr(3) : "home"; 
     update(page); 

     $(document).on("click", "a", function() { 
     if ($(this).attr("href").substr(0, 4) != "http") { 
      event.preventDefault(); 
      window.location.hash = "!/" + $(this).attr("href"); 
     } 
     }); 

     $(window).on("hashchange", function() { 
     $("body").fadeOut(1000, function() { 
      update(window.location.hash); 
     }); 
     }); 
    }); 

    function update(page) { 
     $("body").css("display", "none"); 
     $("#content").html(pages[page][2]); 
     $("body").fadeIn(2000); 
    } 
    </script> 
    </head> 
    <body> 
    <div id="navbar"> 
     <ul> 
     <li><a href="test"><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></a></li> 
     <li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li> 
     </ul> 
    </div> 

    <div id="content"></div> 
    </body> 
</html>

источник

2013-04-10 Anonymous

Что '.substr (3)' для? – adeneo

Из-за того, как я делаю хэши, вы также видели, что я добавил!/К хешу? – 2013-04-10 01:00:55

window.location.hash будет '#!/test'

Попробуйте это:

var page = window.location.hash.replace('#!/', ''); 

update(page);

источник

2013-04-10 01:01:08 plalx

А это работает, спасибо! – 2013-04-10 01:03:12

Похоже, что вам нужно изменить page переходила в обновлении, чтобы вынуть дополнительные символы. При использовании обозначения квадратной скобки свойство, которое вы пытаетесь установить, должно быть точно строкой, которая ее определяет. Как и в настоящее время, вы пытаетесь получить свойство с именем ["#! /"], И оно не существует.

function update(page) { 
    $("body").css("display", "none"); 
    $("#content").html(pages[page.replace("#!/", "")][1]); 
    $("body").fadeIn(2000); 
}

jsFiddle example

источник

2013-04-10 01:03:54 SomeShinyObject

Это не влияет на то, как я подстрою три символа в переменной страницы в верхней части кода javascript. – 2013-04-10 01:05:58

Изменение страницы с помощью JQuery

ответ

Смежные вопросы