| Нам уже... |
|
 |
| Меню сайта |
|
|
| IP-информер |
 |
|
|
Главная » 2015 » Апрель » 16 » Как сделать раскрывающийся текст
12:17 Как сделать раскрывающийся текст |
Используйте пользовательскую функцию на языке JavaScript, чтобы организовать в HTML-странице сокрытие и отображение нужных блоков текста. Общая для всех блоков функция намного удобнее, чем добавление кода к каждому из них по отдельности. В заголовочную часть исходного кода страницы поместите открывающий и закрывающий теги script, а между ними создайте пустую пока функцию с названием, например, swap и одним обязательным входным параметром id:<script>function swap(id) {}</script>
Добавьте две строки JavaScript-кода в тело функции - между фигурными скобками. Первая строка должна считывать текущее состояние блока текста - включена его видимость или выключена. Таких блоков в документе может быть несколько, поэтому каждый должен иметь собственный идентификатор - именно его функция получает в качестве единственного входного параметра id. По этому идентификатору она и разыскивает в документе нужный блок, присваивая значение видимости/невидимости (состояние свойства display) переменной sDisplay:sDisplay = document.getElementById(id).style.display;
Вторая строка должна менять свойство display нужного блока текста на противоположное - скрывать, если текст видим, и отображать, если скрыт. Это можно делать таким кодом:document.getElementById(id).style.display = sDisplay == 'none' ? '' : 'none';
Поместите в заголовочную часть еще и такое описание стилей:<style type="text/css">a {cursor: pointer}</style>Оно понадобится для правильного отображения указателя мыши при наведении курсора на неполный тег ссылки. С помощью таких ссылок вы организуете в странице переключение видимости/невидимости текстовых блоков.
Разместите в тексте эти ссылки-переключатели перед каждым скрытым блоком, а в блоки - в конце текста - добавьте аналогичную ссылку. Невидимый текст заключите в теги span, у которых в атрибутах style задана невидимость. Например:Раскройте текст <a onclick="swap('hiddenTxt')">+++</a> <span id="hiddenTxt" style="display: none">Это скрытый текст <a onclick="swap('hiddenTxt')">---</a></span>В этом образце щелчок по ссылке из трех плюсов будет вызывать описанную выше функцию по событию onClick, передавая ей идентификатор блока, который нужно сделать видимым. А внутрь блока помещена ссылка из трех минусов с такими же функциями - щелчок по ней будет скрывать текст.
Создайте нужное количество текстовых блоков, аналогичных описанному в предыдущем шаге, не забывая при этом менять идентификаторы в атрибуте id тега span и в переменной, передаваемой функции по событию onClick в двух ссылках.
|
|
Категория: Статьи для начинающего вебмастера |
Просмотров: 431 |
Добавил: evgeny
| Рейтинг: 0.0/0 |
|
|
| Вход на сайт |
|
|
|
