Хаки и Скрипты Next Generation CMS

Переходы внутри сайта без перезагрузки на javascript history

irbees2008 irbees2008 Опубликовано - 30 - апреля JS
3085 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Вот набрел на интересный скрипт,может кому пригодится,мне лично он понравился.
Такую функцию вы ввстречали в соц сетях,сегодня реализуем для NG
1.Скрипт использует jquery,это вы видите из ниже приведенного куска кода,этот код ставите перед закрытием тега body.
Если jquery уже подключен второй раз подключать не надо

Код:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
doHistoryLogic();
$('.dolink').click(function(e){
e.preventDefault();
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
window.history.pushState($(this).attr('id'), "Title", $(this).attr('href'));
doHistoryLogic();
});
});
var doHistoryLogic=function(){
console.log(window.history);
switch(window.history.state){
case "home":
$('.about,.contact').fadeOut();
$('.home').fadeIn();
break;
case "about":
$('.home,.contact').fadeOut();
$('.about').fadeIn();
break;
case "contact":
$('.about,.home').fadeOut();
$('.contact').fadeIn();
break;
default: $('.about,.contact').fadeOut();
$('.home').fadeIn();
break;
}
}
</script>
В скрипте вы наверное заметили что будем работать с сылками по id/
2. Вот сам список меню,как видите для каждого пункта меню задан свой Id
Код:
<ul >
<li class="active"><a href="#"' id='home'>Home</a></li>
<li><a href="#" id='about'>About</a></li>
<li><a href="#" id='contact'>Contact</a></li>
</ul>

Можешь почитать и вот эту статейку "Теги комментариев"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [5]
  • Гости: [5]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 30
  • Генерация страницы: 0.865сек
  • Потребление памяти: 5.308 Mb 
  •   Яндекс.Метрика