Простой способ создания скрытого контента

Приветствую вас! Возможно, вы замечали, как на разных сайтах размещается так называемый скрытый контент. Что это такое? Это когда, нажимая на отдельный элемент страницы, вы перемещаетесь на другой без ее перезагрузки. Сегодня я подробно расскажу, как достичь этого эффекта!

Язык программирования JavaScript

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

Закончить обработку можно посредством PHP блоков. Процедура проста и неприхотлива, но с одним условием, если хостинг на котором размещен ресурс может работать с PHP инструкциями.

При всех своих достоинствах, фреймы имеют серьезный недостаток. Фреймы «тормозят» индексирование интернет ресурса роботами поисковиками. Без такой оптимизации жизнеспособность сайта ставится под сомнение.

Задачу правильного отображения в поисковиках без лишней перезагрузки страницы просто без проблем решает JavaScript код. Как будет меняться стиль контента, выглядит вот так:

Нажмите

или

Нажмите

И в первом и во втором случае мы использовали один и тот же управляющий код JavaScript:

Разберем данную конструкцию по элементам:

function disp ( e ) {...} где -

function – новая функция

disp – функция с именем

e - переменная

document.getElementById(e).style.display – DOM элемент для языка JavaScript. DOM выбирает параметры с заданным ID, потом ищет установку, как именно этот элемент отображается на дисплее.

document.getElementById(e).style.display != "none") ? "none" : ' ' ; установка выбора «или».

Общий вид:

a = (условие) ? 'действие_1' : 'действие_2' ; - выполняются условия проверки. От результата зависят условия действия. Если верно - то 'действие_1' если нет - 'действие_2'.

В случае если на дисплее значение не равно "none", сделаем его таковым, прировняем к "none". Либо оставим его пустым.

После скриптов идет контент. Все что мы хотим скрыть размещаем в формуляр

...

. Далее придаем ему значение ID и соответствующий стиль style="display:none".

Конструкция для первой картинки:

Далее нам осталось разобраться в скрипте. Наша задача, чтобы он при вызове изменил параметры отображения нашей картинки или контента. Используем элемент со свойством OnClick. В данном случае это так: ...:

Нажмите

Одно нажатие на мышь и скрипт запускается. Браузер реагирует на щелчок и запускает обработку нашего события. Все предельно просто и элементарно.

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

Второй пример срытого контента показывает, как одновременно открывается один элемент и закрывается другой. Исходный код выглядит так: