Вход

Просмотр полной версии : Блокировка повторного перехода по ссылке

Alessio18911
20.06.2017, 12:41
Привет! Делаю пагинатор. Хочется, чтобы если находишься на странице, она была некликабельна, т.е. не переходило повторного перехода по ссылке и, соответственно, она не перезагружалась. Получилось сделать так:

<!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 https://fonts.google.com */
@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();
});
});
}

Стрелки работать не будут - это не суть важно здесь, ссылки тоже левые. Проблема в том, что при если какая-либо из ссылок с цифрами была кликнута, то повторно она перестаёт работать навсегда, даже после возврата к ней после кликов по другим ссылкам. Подскажите, пожалуйста, что нужно исправить.
ksa
20.06.2017, 14:18
Подскажите, пожалуйста, что нужно исправить.
Для "некликабельности" ссылки достаточно сделать ее такой

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

Но если пользователь перечитает страницу - ссылки опять "восстановятся".
Либо придется подключать локальное хранилище и "усиливать" скрипт на странице...
Alessio18911
20.06.2017, 19:50
Спасибо, что откликнулись! Но могли бы Вы написать, как изменить мой код - я новичок, поэтому ещё не совсем понимаю, что и куда дописать :)
ksa
21.06.2017, 08:33
как изменить мой код
Вот...

<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>
Alessio18911
21.06.2017, 12:21
Возможно, я что-то не так переношу - никак не могу запустить:

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();
});
});
}