Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.06.2017, 12:41
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Блокировка повторного перехода по ссылке
Привет! Делаю пагинатор. Хочется, чтобы если находишься на странице, она была некликабельна, т.е. не переходило повторного перехода по ссылке и, соответственно, она не перезагружалась. Получилось сделать так:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Made with Thimble</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="paginator">
      <a class="prev paginator-disabled" href="https:\\yahoo.com"></a>
      <a class="paginator-current" href="https:\\vk.com" target="_blank">1</a>
      <a href="https:\\vk.com" target="_blank">2</a>
      <a href="https:\\vk.com" target="_blank">3</a>
      <a href="https:\\vk.com" target="_blank">4</a>
      <a href="https:\\vk.com" target="_blank">5</a>
      <a class="next" href="https:\\yahoo.com"></a>
    </div>
	<script src="script.js"></script>
  </body>
</html>


/* Fonts from Google Fonts - more at [url]https://fonts.google.com[/url] */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

body {
  background-color: green;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
}

h1 {
  font-family: "Merriweather", serif;
  font-size: 32px;
}

a {
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  color: rgb(255, 255, 255); 
  text-decoration: none;
}

.paginator {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  width: 215px;
  margin-left: auto;
  margin-top: 39px;
  margin-bottom: 11px;
  padding: 13px 13px;
  /* outline: 1px solid red; */
}

.paginator a {
  width: 26px;
  height: 26px;
  margin-right: 2px;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
/*   outline: 1px solid yellow;  */

}

.paginator a:last-of-type {
  margin-right: 0;
}	

.paginator .paginator-current {
  width: 26px;
  height: 26px;
  color: rgb(50, 50, 50);
  background-color: rgb(255, 255, 255); 
  border-radius: 50%;
}

.paginator .prev,
.paginator .next {
  width: 10px;
  height: 27px;
  background-image: url("spritesheet.png");
  background-position: -8px -694px;
}

.paginator .prev {
  margin-right: 12px;
  transform: rotate(180deg);
  background-position: -8px -693px;
}

.paginator .next {
  margin-left: 10px;
}

.paginator-disabled {
  opacity: 0.2;
  cursor: default;
}


var paginator = document.getElementsByClassName("paginator");
    var pageNum = paginator[0].getElementsByTagName("a");
    for (var i = 0; i < pageNum.length; i++) 
    {
        pageNum[i].addEventListener("click", function () 
        {
          for (i = 0; i < pageNum.length; i++) 
          {
            pageNum[i].classList.remove("paginator-current");
          }
          this.classList.add("paginator-current");
		  this.addEventListener("click", function(evt) {
			evt.preventDefault();  
		  });
		});
	}

Стрелки работать не будут - это не суть важно здесь, ссылки тоже левые. Проблема в том, что при если какая-либо из ссылок с цифрами была кликнута, то повторно она перестаёт работать навсегда, даже после возврата к ней после кликов по другим ссылкам. Подскажите, пожалуйста, что нужно исправить.
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2017, 14:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Сообщение от Alessio18911
Подскажите, пожалуйста, что нужно исправить.
Для "некликабельности" ссылки достаточно сделать ее такой

<a href="javascript:void(0)">Test</a>


Но если пользователь перечитает страницу - ссылки опять "восстановятся".
Либо придется подключать локальное хранилище и "усиливать" скрипт на странице...
Ответить с цитированием
  #3 (permalink)  
Старый 20.06.2017, 19:50
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Спасибо, что откликнулись! Но могли бы Вы написать, как изменить мой код - я новичок, поэтому ещё не совсем понимаю, что и куда дописать
Ответить с цитированием
  #4 (permalink)  
Старый 21.06.2017, 08:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Сообщение от Alessio18911
как изменить мой код
Вот...

<a href='http://javascript.ru/forum/misc/69407-blokirovka-povtornogo-perekhoda-po-ssylke.html#post456068'>Test</a>
<script type='text/javascript'>
var o=document.getElementsByTagName('a')[0];
o.setAttribute('href','javascript:void(0)')
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 21.06.2017, 12:21
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Возможно, я что-то не так переношу - никак не могу запустить:
var paginator = document.getElementsByClassName("paginator");
var pageNum = paginator[0].getElementsByTagName("a")[0];
pageNum.setAttribute('href','javascript:void(0)');

      for (var i = 0; i < pageNum.length; i++) 
      {
        pageNum[i].addEventListener("click", function () 
                                    {
          for (i = 0; i < pageNum.length; i++) 
          {
            pageNum[i].classList.remove("paginator-current");
          }
          this.classList.add("paginator-current");
          this.addEventListener("click", function(evt) {
            evt.preventDefault();
          });
        });
      }

Последний раз редактировалось Alessio18911, 21.06.2017 в 12:28.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выполнение события после перехода по ссылке cuoresanguinato Events/DOM/Window 2 10.08.2016 21:03
Форма перехода по ссылке dima_riabets Элементы интерфейса 1 06.12.2015 17:50
Перехват перехода по адресу в ссылке Dracul Общие вопросы Javascript 3 04.12.2013 00:13
Как сделать пункт в выпадающем списке по умолчанию, после перехода по ссылке? Damian Элементы интерфейса 18 24.09.2012 18:17
имитация перехода по ссылке kalisha Events/DOM/Window 2 30.01.2010 17:10