3199
- 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>
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>
Можешь почитать и вот эту статейку "Следующая модификация плагина basket"
Это тоже интересно
- 21.06.17Смена цифр на JavaScript
- 09.04.21Оформляем красивую ссылку
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.