Изменить содержимое div и URL-адрес хеша

Question

Изменить содержимое div и URL-адрес хеша

0

Я создал полностью функциональный скрипт замены содержимого Ajax. Проблема заключается в том, что он добавляет вперед, например, /# about или /# work или /# contact к адресу, но когда я перезагружаю сайт, главная страница будет показана. Зачем? Как возможно, что, когда я наберу адрес, будет отображаться правая подстраница?

Кто-то сказал мне, что проблема в том, что я добавил файл вручную, когда использую popstate. Поэтому я хочу решение без popstate. Я не эксперт Javascript, но я хотел бы изучить его. Потому что popstate, но это очень круто.

window.location.hash = $(this).attr('href');

Мои.html файлы хранятся в /data/. Странно то, что он находит файл, но когда я пытаюсь найти его вручную, страница показывает главную страницу или когда я обновляю сайт с помощью F5, также будет показана главная страница.

Можете ли вы мне помочь и показать, как это работает. Мы можем использовать мой код, чтобы найти ошибку. Большое спасибо.

Вот ссылка Websitelink: Demo Link

function refreshContent() {
var targetPage = 'home';
var hashMatch = /^#(.+)/.exec(location.hash);
// if a target page is provided in the location hash
if (hashMatch) {
  targetPage = hashMatch[1];
}
$('#allcontent').load('data/' + targetPage + '.html');
}


$(document).ready(function(){
refreshContent();
window.addEventListener('hashchange', refreshContent, false);
$('.hovers').click(function() {
var page = $(this).attr('href'); 
$('#allcontent').fadeOut('slow', function() {
$(this).animate({ scrollTop: 0 }, 0);
$(this).hide().load('data/' + page +'.html').fadeIn('normal');
});

});
});

$('.hovers').click(function() {
  window.location.hash = $(this).attr('href'); 
  $.get('data/'+this.href, function(data) {
    $('#allcontent').slideTo(data)      
  })
  return false  
})

martin85 20 янв. 2014, в 16:32

Источник

0

Кажется, здесь работает. Перезагрузка ничего не меняет в URL.
WonderWorld 20 янв. 2014, в 14:50
0

Может быть, это может быть полезно: stackoverflow.com/questions/680785/…
WoIIe 20 янв. 2014, в 15:18

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Кажется, здесь работает. Перезагрузка ничего не меняет в URL.
Может быть, это может быть полезно: stackoverflow.com/questions/680785/…

sroes · Accepted Answer · 2014-01-20T12-08-00.000Z

Вы должны загрузить начальную страницу на основе location.hash (если предусмотрено) при загрузке страницы:

function refreshContent() {
   var targetPage = 'home';
   var hashMatch = /^#!\/(.+)/.exec(location.hash);
   // if a target page is provided in the location hash
   if (hashMatch) {
      targetPage = hashMatch[1];
   }
   $('#allcontent').load('data/' + targetPage + '.html');
}


$(document).ready(function(){
   refreshContent();
   ...

Вы можете сделать назад и вперед работу, прослушивая событие Window.onhashchange:

window.addEventListener('hashchange', refreshContent, false);

Обратите внимание, что это не работает в Internet Explore 7 или ниже.

Редактировать:

Хорошо, попробуйте следующее:

var $contentLinks = null;
var contentLoaded = false;

function refreshContent() {
   var targetPage = 'home';
   var hashMatch = /^#(.+)/.exec(location.hash);
   var $content = $('#allcontent');

   // if a target page is provided in the location hash
   if (hashMatch) {
      targetPage = hashMatch[1];
   }

   // remove currently active links
   $contentLinks.find('.active').removeClass('active');
   // find new active link
   var $activeLink = $contentLinks.siblings('[href="' + targetPage + '"]').find('.navpoint');
   // add active class to active link
   $activeLink.addClass('active');
   // update document title based on the text of the new active link
   window.document.title = $activeLink.length ? $activeLink.text() + ' | Celebrate You' : 'Celebrate You';

   // only perform animations are the content has loaded
   if (contentLoaded) {
       $content
           .fadeOut('slow')
           .animate({ scrollTop: 0 }, 0)
       ;
   }

   // after the content animations are done, load the content
   $content.queue(function() {
       $content.load('data/' + targetPage + '.html', function() {
           $content.dequeue();
       });
   });

   if (contentLoaded) {
       $content.fadeIn();
   }

   contentLoaded = true;
}

$(document).ready(function() {
    $contentLinks = $('.hovers');

    refreshContent();

    window.addEventListener('hashchange', refreshContent, false);

    $contentLinks.click(function(e) {
        e.preventDefault();
        window.location.hash = '!/' + $(this).attr('href'); 
    });
});

Мой плохой, $(window).hashchange не существует, потому что он поддерживается не во всех браузерах. Я обновил код для window.addEventListener('hashchange', refreshContent, false); ,
пожалуйста, взгляните на этот celebrateyou.eu ... исчезновение исчезло ... у меня обновленный код выше.
Я переработал твой код, можешь попробовать новую версию?
Я не смог протестировать код и забыл 2 вещи. Попробуйте еще раз сейчас.
load.js не похоже на последние изменения
Боже ты мой! это работает так приятно! :) Посмотри его выложил. работает так приятно! :) Большое спасибо за ваше время и помощь! :)
И последний вопрос: можно ли удалить тег из тега? например: example.com/#contact to example.com/contact
Знаете ли вы, как отлаживать свой Javascript? Знание того, как использовать такие инструменты, как Chrome Developer Tools или Firebug, также поможет вам в обучении.
да, конечно, но как может помочь мне решить проблему с #contact, например ... это проблема htaccess?
Что ж, если вы хотите использовать /contact вместо /#contact вам нужно будет использовать history.pushState вместо хеша, что является совершенно другой техникой. Для этого уже существуют скрипты, посмотрите на github.com/defunkt/jquery-pjax
Хорошо, я добавил активный класс для навигации, но с вперед и назад он не работает в кооперативе с этим кодом. Пожалуйста, посмотрите на celebrateyou.eu
Да, вы должны найти ссылку с целевой страницей в refreshContent . Смотрите мое редактирование.
обновил @url :) Спасибо большое! Может ли быть шанс манипулировать URL-адресом, как этот / # about to / #! / About, с помощью этой техники? или это невозможно? В любом случае, большое спасибо!
Конечно, вам нужно изменить 2 строки: var hashMatch = /^#(.+)/.exec(location.hash); и window.location.hash = $(this).attr('href'); , Я оставлю это вам в качестве упражнения :)
я бы сказал, что первая строка должна измениться на var hashMatch = /^#!\/(.+)/.exec(location.hash); но вторая строка, я понятия не имею,
Правильно, вторая строка: window.location.hash = '!/' + $(this).attr('href');
Приятно! работает нормально! Последний вопрос :) Можно ли изменить заголовок URL-адреса для конкретной страницы? Нравится этот дом | Отпразднуйте Вас о | Отпразднуете Вас ... например? Это способ решения? addthis.update ('title', window.location.href);
Хорошо, последнее обновление Теперь он обновляет заголовок документа на основе текста активной ссылки.
о: / я не удаляю кеш .. активный режим навигации больше не работает. Почему? :( И когда я делаю ссылку на новый сайт (нажмите на красный div на домашней странице), ссылка не работает и отправляет мне, например, / about not to / #! / About. Я обновил ее на celebrateyou.eu.
Я случайно удалил $activeLink.addClass('active');