Кнопка «следующая/предыдущая» активируется при нумерации страниц с помощью jquery

У меня есть нумерация страниц, я не понимаю, как активировать следующий/предыдущий значок при нажатии на него. В настоящее время, если я нажимаю на цифры, отображается соответствующая страница. Пожалуйста, помогите показать страницы при нажатии на кнопки «Далее» и «Предыдущий», а также как отключить значки «Далее» и «Предыдущий», если страница находится на первой и последней странице соответственно. Пожалуйста помоги. Ниже мой код

$(document).ready(function() {
  pageSize = 2;

  showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
      if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
    });
  }

  showPage(1);

  $("#pagin li a").click(function() {
    $("#pagin li a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text()))
  });

});

.content {
  margin: 1px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
  background-color: gray;
}

#pagin {
  clear: both;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}

#pagin li {
  float: left;
  margin-right: 10px;
}

#pagin li a {
  display: block;
  color: #717171;
  font: bold 11px;
  text-shadow: 0px 1px white;
  padding: 5px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  background: #f9f9f9;
  background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a.current {
  color: white;
  text-shadow: 0px 1px #3f789f;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  background: #7cb9e5;
  background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}

#pagin li a:hover {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  background: #fff;
  background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a:active,
#pagin li a.current:active {
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}

#pagin li a.current:hover {
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  background: #99cefc;
  background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}

li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>
<div class="content">13 I have some content</div>
<div class="content">14 I have some content</div>
<div class="content">15 I have some content</div>
<div class="content">16 I have some content</div>

<ul id="pagin">
  <li id="prev"><a class="" href="#"><svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
</svg></a></li>
  <li><a class="current" href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li id="next"><a class="" href="#"><svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
</svg>

</a></li>
</ul>

html css jquery

17.05.2022 15:10

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Введение в технологический стек Twitch

В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:

8 полезных HTML-тегов, которые лучше использовать вместо <div>

Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...

HTML5: API локального хранилища (Local Storage)

LocalStorage - это простой способ хранения данных в браузере пользователя.

Доступность HTML - программирование с инклюзивной перспективой

Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...

Именование классов CSS: Конвенция именования BEM

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Чтобы включить/отключить ссылки #prev и #next на основе текущей страницы, вы можете выполнить проверку в функции showPage, которая добавляет к ним класс, который устанавливает pointer-events: none.

Также обратите внимание на использование slice() вместо явного цикла для скрытия/отображения элементов .content, относящихся к текущей странице.

Обновлять:

On clicking of next & previous button how shall I show the respective page

Для этого измените свою логику, чтобы функция, которая устанавливает страницу, также обновляла пользовательский интерфейс, т.е. кнопка активной страницы и отключенные состояния предыдущего/следующего. Оттуда единственное, что вам нужно записать, это номер текущей страницы, чтобы вы могли увеличивать/уменьшать его при нажатии на предыдущий/следующий, что я сделал, используя атрибут data() в контейнере для элементов .content, и передать это к функции, которая устанавливает активную страницу.

Попробуй это:

jQuery($ => {
  let pageSize = 2;
  let pageCount = Math.ceil($('.content').length / 2);
  
  let $pageContainer = $('.page-container');
  let $pageLinks = $('#pagin li a.page');
  let $prev = $('#prev');
  let $next = $('#next');
  let currentPage = $pageContainer.data('page');

  let setActivePage = page => {
    let start = pageSize * (page - 1);
    let end = pageSize * page;
    $(".content").hide().slice(start, end).show();

    $('#prev').toggleClass('disabled', page <= 1);
    $('#next').toggleClass('disabled', page >= pageCount);
    
    $pageLinks.removeClass("current");
    $pageLinks.eq(page - 1).addClass('current');
    
    $pageContainer.data('page', page);
  }

  setActivePage(currentPage);

  $pageLinks.on('click', e => setActivePage($(e.target).closest('li').index()));

  $prev.on('click', e => setActivePage($pageContainer.data('page') - 1));

  $next.on('click', e => setActivePage($pageContainer.data('page') + 1));
});

.content {
  margin: 1px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
  background-color: gray;
}

#pagin {
  clear: both;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}

#pagin li {
  float: left;
  margin-right: 10px;
}

#pagin li a {
  display: block;
  color: #717171;
  font: bold 11px;
  text-shadow: 0px 1px white;
  padding: 5px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  background: #f9f9f9;
  background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a.current {
  color: white;
  text-shadow: 0px 1px #3f789f;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  background: #7cb9e5;
  background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}

#pagin li a.disabled {
  pointer-events: none;
  opacity: 0.4;
}

#pagin li a:hover {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  background: #fff;
  background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a:active,
#pagin li a.current:active {
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}

#pagin li a.current:hover {
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  background: #99cefc;
  background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}

li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container" data-page="1">
  <div class="content">1 I have some content</div>
  <div class="content">2 I have some content</div>
  <div class="content">3 I have some content</div>
  <div class="content">4 I have some content</div>
  <div class="content">5 I have some content</div>
  <div class="content">6 I have some content</div>
  <div class="content">7 I have some content</div>
  <div class="content">8 I have some content</div>
  <div class="content">9 I have some content</div>
  <div class="content">10 I have some content</div>
  <div class="content">11 I have some content</div>
  <div class="content">12 I have some content</div>
  <div class="content">13 I have some content</div>
  <div class="content">14 I have some content</div>
  <div class="content">15 I have some content</div>
  <div class="content">16 I have some content</div>
</div>

<ul id="pagin">
  <li>
    <a href="#" id="prev">
      <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
      </svg>
    </a>
  </li>
  <li><a class="page current" href="#">1</a></li>
  <li><a class="page" href="#">2</a></li>
  <li><a class="page" href="#">3</a></li>
  <li><a class="page" href="#">4</a></li>
  <li><a class="page" href="#">5</a></li>
  <li><a class="page" href="#">6</a></li>
  <li><a class="page" href="#">7</a></li>
  <li><a class="page" href="#">8</a></li>
  <li>
    <a href="#" id="next">
      <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
      </svg>
    </a>
  </li>
</ul>

Рори МакКроссан, Спасибо за ответ. при нажатии кнопки «Далее» и «Предыдущий», как мне показать соответствующую страницу. Например: по умолчанию выбран номер 1, если я нажму кнопку «Далее», он должен перейти к номеру 2 и показать соответствующую страницу. аналогично, если я нажму на предыдущую кнопку. Не чувствуйте себя обиженным. На самом деле я пытаюсь это с 2 дней

— 17.05.2022 17:33

Нет проблем - я обновил ответ, чтобы показать вам, как это сделать.

— 17.05.2022 17:59

17.05.2022 16:41

При нажатии кнопки «Далее» и «Предыдущий». он не дает текстовое значение, а имеет значок в теге привязки. Таким образом, он выделяет кнопку, а функция showPage(parseInt($(this).text())) не работает

Вот изменения, необходимые на основе вашего кода

$(document).ready(function() {
  pageSize = 2;

  showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
      if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
    });
  }

  showPage(1);

  $("#pagin li a").click(function() {
    let selectedPage = $("#pagin li a.current").parent().index();
    $("#pagin li a").removeClass("disable");
    $("#pagin li a").removeClass("current");

    if($(this).parent().is('#next')) {    
     showPage(selectedPage + 1)
     $("#pagin li").eq(selectedPage + 1).children('a').addClass("current");
    } else if($(this).parent().is('#prev')) {
      showPage(selectedPage - 1)
      $("#pagin li").eq(selectedPage -1).children('a').addClass("current");
    } else {
      $(this).addClass("current")
      showPage(parseInt($(this).text()))
    }
   if($("#pagin li a.current").parent().index() == 1) {
    $('#prev a').addClass('disable');
   }
   if($("#pagin li a.current").parent().index() == 8) { 
    $('#next a').addClass('disable');
   }
  });

});

.content {
  margin: 1px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
  background-color: gray;
}

#pagin {
  clear: both;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}

#pagin li {
  float: left;
  margin-right: 10px;
}

#pagin li a {
  display: block;
  color: #717171;
  font: bold 11px;
  text-shadow: 0px 1px white;
  padding: 5px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  background: #f9f9f9;
  background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a.current {
  color: white;
  text-shadow: 0px 1px #3f789f;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  background: #7cb9e5;
  background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}

#pagin li a:hover {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  background: #fff;
  background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a:active,
#pagin li a.current:active {
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}

#pagin li a.current:hover {
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  background: #99cefc;
  background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}

li {
  list-style-type: none;
}
.disable {
  pointer-events: none;
  cursor: not-allowed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>
<div class="content">13 I have some content</div>
<div class="content">14 I have some content</div>
<div class="content">15 I have some content</div>
<div class="content">16 I have some content</div>

<ul id="pagin">
  <li id="prev"><a class="disable" href="#"><svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
</svg></a></li>
  <li><a class="current" href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li id="next"><a class="" href="#"><svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
</svg>

</a></li>
</ul>

17.05.2022 18:39

Другие вопросы по теме

JS скрывает все элементы одного класса, кроме одного

Как получить значение из данных json для ввода

Функция публикации AJAX без формы Не сброшена

Выберите отдельный, где идентификатор в списке значений - дает мне неправильный результат

Beautifulsoup выбирает элемент на основе innerHTML с помощью Python

Перезагрузка таблицы стилей плавна в Chrome, но странно в Firefox (jQuery)

Выберите только нажатую кнопку JQuery

Кнопка Удалить строку таблицы удаляет все последующие строки

Отвязать событие в Javascript

Как установить значение поля ввода на основе значения другого поля?

Кнопка «следующая/предыдущая» активируется при нумерации страниц с помощью jquery

Ответы 2

Другие вопросы по теме

Похожие вопросы