Як зробити розкривається текст
Розміщення прихованих блоків тексту покращує візуальне сприйняття сторінки веб-сайту - вона завантажується в браузер саме в тому вигляді, який розробив дизайнер, незалежно від розміщеного обсягу інформації. Крім того, це зручніше відвідувачу - в пошуках потрібного блоку інформації йому не доводиться переглядати весь масив, а тільки лише невеликі «верхівки айсбергів».
Вам знадобиться
- Базові знання мов HTML і javascript.
Інструкція
1
Використовуйте для користувача функцію на мові javascript, щоб організувати в HTML-сторінці приховування і відображення потрібних блоків тексту. Загальна для всіх блоків функція набагато зручніше, ніж додавання коду до кожного з них окремо. У заголовну частину вихідного коду сторінки помістіть відкриває і закриває теги script, а між ними необхідно створити пусту поки функцію з назвою, наприклад, swap і одним обов`язковим вхідним параметром id:
2
Додайте два рядки javascript-коду в тіло функції - між фігурними дужками. Перший рядок повинна зчитувати поточний стан блоку тексту - включена його видимість або вимкнена. Таких блоків у документі може бути кілька, тому кожен повинен мати власний ідентифікатор - саме його функція отримує в якості єдиного вхідного параметра id. З цього ідентифікатором вона і розшукує в документі потрібний блок, привласнюючи значення видимості / невидимості (стан властивості display) змінної sDisplay: sDisplay = document.getElementById (id) .style.display-
3
Другий рядок повинен міняти властивість display потрібного блоку тексту на протилежне - приховувати, якщо текст бачимо, і відображати, якщо прихований. Це можна робити таким кодом: document.getElementById (id) .style.display = sDisplay == `none`? ``: `None`-
4
Помістіть в заголовну частину ще й такий опис стилів: Воно знадобиться для правильного відображення покажчика миші при наведенні курсору на неповний тег посилання. За допомогою таких посилань ви організуєте в сторінці перемикання видимості / невидимості текстових блоків.
5
Додайте в тексті ці посилання-перемикачі перед кожним прихованим блоком, а в блоки - в кінці тексту - додайте аналогічну посилання. Невидимий текст укладіть в теги span, у яких в атрибутах style задана невидимість. Наприклад: Розкрийте текст +++ У цьому зразку клацання по посиланню з трьох плюсів буде викликати описану вище функцію по події onclick, передаючи їй ідентифікатор блоку, який потрібно зробити видимим. А всередину блоку поміщена посилання з трьох мінусів з такими ж функціями - клацання по ній буде приховувати текст.
6
Створіть потрібну кількість текстових блоків, аналогічних описаним в попередньому кроці, не забуваючи при цьому міняти ідентифікатори в атрибуті id тега span і в змінної, переданої функції за подією onclick в двох посиланнях.
Статті за темою "Як зробити розкривається текст"
Оцініть, будь ласка статтю
