Как сделать невидимым определённый элемент списка UL

@jeyerer · Регистрация: 06.06.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток! Подскажите пожалуйста! Есть список (см. ниже), в нём есть n-ое количество элементов (пусть будет 10). Так вот, подскажите пожалуйста, как сделать так, чтобы из них видны были только 2-а первых, а после нажатия 3-ий и 4-ый, и т.д. (аналогично в обратном порядке)? Каким образом лучше это сделать. Хотя бы намекните

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="spisok" id="spisok">
<li id="n-1">1</li>
<li id="n-2">2</li>
<li id="n-3">3</li>
<li id="n-4">4</li>
<li id="n-5">5</li>
<li id="n-6">6</li>
<li id="n-7">7</li>
<li id="n-8">8</li>
<li id="n-9">9</li>
<li id="n-10">10</li>
</ul>
<a href="#" onClick="next()">Дальше</a>
<a href="#" onClick="back()">Назад</a>

Достучатся до них можно, зная их id но на данный список настроена возможность сортировки. Т.е. необходимо искать первые элементы именно по списку. Как это лучше сделать? Пожалуйста, подскажите)

@sad67man · 06.07.2016, 10:50

https://jsfiddle.net/rk0fxmwf/2/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul class="spisok" id="spisok">
  <li id="n-1" class="active">1</li>
  <li id="n-2" class="active">2</li>
  <li id="n-3">3</li>
  <li id="n-4">4</li>
  <li id="n-5">5</li>
  <li id="n-6">6</li>
  <li id="n-7">7</li>
  <li id="n-8">8</li>
  <li id="n-9">9</li>
  <li id="n-10">10</li>
  <li id="n-10">11</li>
</ul>
<a href="#" class="next">Дальше</a>
<a href="#" class="back">Назад</a>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
    $(".next, .back").click(function(e) {
    var visibleCount = 2,
      index,
      elements = $("#spisok li"),
      nextElements,
      activeElements = $("#spisok .active");
    e.preventDefault()
    if ($(this).hasClass("back")) {
      index = elements.index(activeElements.first());
      nextElements = elements.slice(index - visibleCount, index);
    } else {
      index = elements.index(activeElements.last()) + 1;
      nextElements = elements.slice(index, index + visibleCount);
    }
    if (nextElements.length) {
      activeElements.removeClass("active");
      nextElements.addClass("active");
    }
  })
})

CSS
1
2
#spisok li{display:none;}
#spisok li.active{display:list-item;}

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

Как сделать невидимым определённый элемент списка UL

Решение