Слайдер с добавлением url на конкретный слайд
Доброго ввремени суток. Я новичёк в програмировании, и неоткажусь от помощи знающих. нужно решыть такой вопрос. Нужен самый простой слайдер. Который при активации пункта меню , открывал бы один из 4 дивов. и добавлял url на этот див в браузерную строку. Но недолжно выполнятся обновление страницы , и по сгенерированой url ссылке можно было б открыть конкретный div. Это вообще решаемо? И если решаемо то как? Заранее спасибо за вашу помощь)
|
А это как "открыть конкретный div"? Он вообще-то не открывается, он "болтается" на странице, в адресную строку браузера добавить его тоже нельзя. Можно при запросе страницы прокрутить элемент к div с конкретным id, это будет якорь на странице, а в url, это хеш - domain/page#id_name.
|
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>
|
Мне так кажется, что по мультикам можно научится вязанию на спицах или крючком, а вот изучать язык....
Смотрите внимательно мультик, копируйте что там пишут. Например, у вас: navEL = document.getElementById('nav'); А на странице есть элемент с таким id? |
Links vs links - регистр имеет значение.
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
<div class="container"> <h1> Welcome to my sample page</h1> <ul id="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>
var links,
updatestate,
updatebuttons,
contentEL,
navEL,
contentEL = document.querySelector('.content');
navEL = document.querySelector('.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.querySelectorALL('a'))
.forEach(function(e){
var classList = e.parentNode.classList;
state.page === e.getAttribute('href')
? classList.add('active')
: classList.remove('active');
});
};
window.addEventListener('popstate', function(e){
updatestate(e.state);
});
navEL.addEventListener('click', function(e){
var state;
if (e.target.tagName !=='A') return;
state = { page: e.target.getAttribute('href')};
history.pushState(state, '', state.page);
updatestate(state);
e.preventDefault();
});
Исправил выше указанные ошибки но всё равно не работает. Консоль выбивает ошибку в строке"history.pushState(state, '', state.page);" но я там ошибку не вижу вроди правильно всё...((( Посмотрите пожалуйста что это за ошибка и иза -чего она? |
Цитата:
|
в этой строке: history.pushState(state, '', state.page)
сама ошибка:Uncaught TypeError: Cannot read property 'addEventListener' of null |
Цитата:
|
| Часовой пояс GMT +3, время: 01:09. |