Привет! Делаю пагинатор. Хочется, чтобы если находишься на странице, она была некликабельна, т.е. не переходило повторного перехода по ссылке и, соответственно, она не перезагружалась. Получилось сделать так:
<!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();
});
});
}
Стрелки работать не будут - это не суть важно здесь, ссылки тоже левые. Проблема в том, что при если какая-либо из ссылок с цифрами была кликнута, то повторно она перестаёт работать навсегда, даже после возврата к ней после кликов по другим ссылкам. Подскажите, пожалуйста, что нужно исправить.