Форум

Jason_smith · #1 (**permalink**) 09.03.2015, 21:49

Доброго ввремени суток. Я новичёк в програмировании, и неоткажусь от помощи знающих. нужно решыть такой вопрос. Нужен самый простой слайдер. Который при активации пункта меню , открывал бы один из 4 дивов. и добавлял url на этот див в браузерную строку. Но недолжно выполнятся обновление страницы , и по сгенерированой url ссылке можно было б открыть конкретный div. Это вообще решаемо? И если решаемо то как? Заранее спасибо за вашу помощь)

laimas · #2 (**permalink**) 10.03.2015, 05:01

А это как "открыть конкретный div"? Он вообще-то не открывается, он "болтается" на странице, в адресную строку браузера добавить его тоже нельзя. Можно при запросе страницы прокрутить элемент к div с конкретным id, это будет якорь на странице, а в url, это хеш - domain/page#id_name.

Jason_smith · #3 (**permalink**) 10.03.2015, 23:17

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>

laimas · #4 (**permalink**) 11.03.2015, 06:59

Мне так кажется, что по мультикам можно научится вязанию на спицах или крючком, а вот изучать язык....

Смотрите внимательно мультик, копируйте что там пишут. Например, у вас:

navEL = document.getElementById('nav');

А на странице есть элемент с таким id?

danik.js · #5 (**permalink**) 11.03.2015, 07:18

Links vs links - регистр имеет значение.

Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

danik.js · #6 (**permalink**) 11.03.2015, 07:19

Сообщение от Jason_smith

Вот код если несложно проверте на наличие ошибок

Тебе недостаточно проверки браузером на наличие ошибок? Жми F12 и смотри в консоль.

Jason_smith · #7 (**permalink**) 12.03.2015, 11:33

<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);"
но я там ошибку не вижу вроди правильно всё...((( Посмотрите пожалуйста что это за ошибка и иза -чего она?

danik.js · #8 (**permalink**) 12.03.2015, 12:21

Сообщение от Jason_smith

Посмотрите пожалуйста что это за ошибка

А у тебя глаз нету? Не можешь понять ошибку сам - то хотяб покажи ее нам.

Jason_smith · #9 (**permalink**) 12.03.2015, 12:24

в этой строке: history.pushState(state, '', state.page)

сама ошибка:Uncaught TypeError: Cannot read property 'addEventListener' of null

danik.js · #10 (**permalink**) 12.03.2015, 12:47

Сообщение от Jason_smith

в этой строке: history.pushState(state, '', state.page)

А где в ней addEventListener?

Форум

Справочник

Discord чат

Курсы javascript