https://www.youtube.com/watch?v=sAjAUmtGylY
Вот делаю урок все по этому видео, но что-то не так так как код всё равно не работает. Нужно также как и на видео сделать чтоб когда пользователь клацал по ссылке то подменялся урл только без # надо сделать. То есть это должна быть якобы имитация перехода по ссылке, но перехода не былоб просто показывался контент , с одного из 4 дивов а остальные скрытые, чтоб пользователь который открыл один из 4 дивов мог на него ссылку например кому нибуть отправить на конкретный див. и все это должно происходить на одной странице без подгрузок аяксов и тд. Надеюсь не запутал) Может есть идеи как это реализовать иначе не так как на видео.
Вот код если несложно проверте на наличие ошибок:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<body>
<div class= "container">
<h1> Welcome to my sample page</h1>
<ul class = "nav" >
<hr />
<li> <a href="main"> Maine</a></li>
<li> <a href="about">Aboute</a></li>
<li> <a href="downloads">Downloads</a></li>
<hr />
</ul>
<div class="content"></div>
</div>
<script>
var links,
updatestate,
updatebuttons,
contentEL,
navEL;
contentEL = document.querySelector('.content');
navEL = document.getElementById('nav');
Links = {
main: "This is page 1",
about
: "This is page 2",
downloads: "this is page 2"
};
updatestate = function(state){
if (!state) return;
contentEL.innerHTML = links[state.page];
updatebuttons(state);
};
updatebuttons = function(state){
[].slice.call(navEL.querySelectoraALL('a'))
.forEach(function(e){
var classList = e.parentNode.classList;
state.page === e.getAttribute('href')
? classList.add('active')
: classList.remove('active');
});
};
window.addEventListener('postate', function(e){
updatestate(e.state);
});
if(navEL){
navEL.addEventListener('click', function(e){
e.preventDefault();
var state;
if (e.target.tagName !=='A') return;
state = {page: e.target.getAttribute('href')};
history.pushState(state, '', state.page);
updatestate(state);
});
}
</script>
</body>
</html>