Bootstrap. Хлебные крошки или навигационная последовательность

@lumiLilo · Регистрация: 28.12.2015

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

Приветствую.

У меня есть страница help (html), в нем блок div.

HTML5
1
2
3
4
5
6
7
8
9
<div class="panel panel-default" id="block_1">
  <div class="panel-heading">Текст</div>
  <div class="panel-body">
    <ul style="margin-top: -10px; margin-bottom: -5px;">
      <li><a id="check_1" class="fff">111</a></li>
      <li><a id="check_2" class="fff">222</a></li>
    </ul>
  </div>
</div>

Есть еще блоки, просто всё уж не буду выкладывать, чтобы не запутать. В общем, при нажатии на ссылку 111 - скрывается нужный блок и показывается нужный блок с текстом, аналогично с ссылкой 222. Проще говоря - всё построено на скрытие/показ блоков.

Блоков/категорий может быть до чертиков много, поэтому мне нужно сделать навигацию.
Как вот её сделать, если у меня одна html страница? У меня не меняется строка в браузере и т.д
Как мне сделать, чтобы по ссылке можно было открыть определенный блок?
Или предложите свой вариант, как лучше сделать?

@mrtoxas · 18.11.2016, 23:00

Очень мало информации. Дайте тот код, где у вас не получается сделать задуманное, может яснее станет. Можно не весь, но чтобы можно было показать конкретнее - вот эту ссылку нажимаем, вот этот блок должен скрываться, а вот этот показываться. И добавьте стили, при помощи каких происходит показ\скрытие блоков.

@lumiLilo · 18.11.2016, 23:06 **[ТС]**

CSS
1
2
3
.hidden {
  opacity: 0;
}

HTML5
1
2
3
4
5
6
7
8
9
<div class="panel panel-default" id="block_1">
  <div class="panel-heading">Текст</div>
  <div class="panel-body">
    <ul style="margin-top: -10px; margin-bottom: -5px;">
      <li><a id="check_1" class="fff">111</a></li>
      <li><a id="check_2" class="fff">222</a></li>
    </ul>
  </div>
</div>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="text_1" class="hidden">
<div class="panel panel-default">
  <div class="panel-body">
    <h3>111</h3>
    <hr>
    Проверка1
  </div>
</div>
</div>
<div id="text_2" class="hidden">
<div class="panel panel-default">
  <div class="panel-body">
    <h3>222</h3>
    <hr>
    Проверка2
  </div>
</div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
<script>
$("#check_1").click(function(){
  $("#text_1").toggleClass("hidden");
  $("#block_1").toggleClass("hidden");
});
$("#check_2").click(function(){
  $("#text_2").toggleClass("hidden");
  $("#block_1").toggleClass("hidden");
});
</script>

Это весь код, заменил лишь длинный текст.

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка 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 и т. д. Сборка примера Скачайте. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	18.11.2016, 23:00
	Очень мало информации. Дайте тот код, где у вас не получается сделать задуманное, может яснее станет. Можно не весь, но чтобы можно было показать конкретнее - вот эту ссылку нажимаем, вот этот блок должен скрываться, а вот этот показываться. И добавьте стили, при помощи каких происходит показ\скрытие блоков. 0