Картотека

Колода карточек (картотека), представленная здесь, является разновидностью меню. Щелчок на карточке приводит к тому, что она меняется местами с карточкой, которая находится на переднем плане. Содержимое карточки определяется HTML-кодом. Это может быть текст, картинки, ссылки и т.д.

Карточки задаются тегами <div>, следующими друг за другом и имеющими атрибуты class с одинаковым значениями. Их видимое расположение определяется скриптом. Скрипт сам определяет, сколько у вас карточек (элементов <div class="note">). В приведенном примере карточки содержат ссылки на некоторые страницы моего сайта. Разумеется, карточки можно задавать не только тегами <div>, но и, например, <img>, <iframe> и др.

В приведенном здесь скрипте используется метод document.getElementsByClassName(значение_атрибута_class), поддерживаемый всеми основными браузерами за исключением IE8. Поэтому для последнего пришлось сделать специальный код.