Как сделать навигацию полноценной AJAX? - PullRequest
Новая
       0

Как сделать навигацию полноценной AJAX?

0 голосов
/ 23 марта 2011

У меня есть вопрос.

Я посетил сайт: http://currenthiphop.com/. И когда я нажал на ссылку, ссылка на адресной строке изменилась на http://currenthiphop.com/#!/ + ссылку.(как Twitter, Faceboook ...)

Однако в атрибуте href нет #!.Зачем ?

Является ли навигация AJAX не?Как я могу сделать что-то подобное?

Спасибо

Ответы [ 3 ]

1 голос
/ 23 марта 2011

Это достаточно для начала.

http://jsfiddle.net/f6dBV/

EDIT - jsFiddle на самом деле не показывает бит location.hash. Вот это на моем сайте: http://jfcoder.com/test/hash.html

<html>
<head>
<style type="text/css">
.content {
    display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#menu a').each(function(){
        id = $(this).attr('href');
        id = id.substring(id.lastIndexOf('/'));
        id = id.substring(0,id.indexOf('.'));
        $(this).attr('rel',id);
    });
    $('#home').show();
    $('#menu a').click(function(e){
        e.preventDefault();
        $('.content').hide();
        $('#'+$(this).attr('rel')).show();
        location.hash = '#!/'+$(this).attr('rel');
        return false;
    });
});

</script>
</head>
<body>
<div id="menu">
    <a href="home.html">Home</a> -
    <a href="one.html">One</a> -
    <a href="two.html">Two</a> -
    <a href="three.html">Three</a>
</div>
<div id="home" class="content">
    Home content.
</div>
<div id="one" class="content">
    One content.
</div>
<div id="two" class="content">
    Two content.
</div>
<div id="three" class="content">
    Three content.
</div>
</body>
</html>
1 голос
/ 23 марта 2011

Это location.hash . Как и в Facebook это сделано с помощью JavaScript. Он используется, чтобы избежать использования GET и перезагрузить страницу.

базовый пример - в папке, где находятся php-страница и JavaScript, у вас есть несколько изображений (1.png, 2.png ... и т. Д.). Как и Facebook (некоторое время назад), если вы скопируете ссылку и вставите ее, js проверяет, есть ли хэш, и перенаправляет вас на требуемое изображение. Код старый и не самый лучший.

0 голосов
/ 08 февраля 2014

Спасибо Джареду Фарришу.

У меня есть одно небольшое дополнительное дополнение, которое позволит вам получать активный контент после обновления страницы. 

$(document).ready(function(){
    $('#menu a').each(function(){
        id = $(this).attr('href');
        id = id.substring(id.lastIndexOf('/'));
        id = id.substring(0,id.indexOf('.'));
        $(this).attr('rel',id);
    });
    active_page = location.hash.substring(location.hash.lastIndexOf('/')+1)
    if (active_page=='')
    {
        active_page='home'
    }
    $('#'+active_page).show();
    $('#menu a').click(function(e){
        e.preventDefault();
        $('.content').hide();
        $('#'+$(this).attr('rel')).show();
        location.hash = '#!/'+$(this).attr('rel');
        return false;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...