Поставянето на скрити блокове от текст подобрява визуалното възприятие на страницата на уебсайта - зарежда се в браузъра точно както го е проектирал дизайнерът, независимо от количеството публикувана информация. Освен това е по-удобно за посетителя - в търсене на необходимия информационен блок той не трябва да разглежда целия масив, а само малки „върхове на айсбергите“.
Необходимо е
Основни познания по HTML и JavaScript
Инструкции
Етап 1
Използвайте персонализирана функция JavaScript, за да скриете и покажете желаните блокове текст в HTML страница. Обща функция за всички блокове е много по-удобна от добавянето на код към всеки от тях поотделно. В заглавната част на изходния код на страницата поставете отварящия и затварящия скрипт тагове и между тях създайте празна функция с име, например swap и един задължителен входен параметър id: функция swap (id) {}
Стъпка 2
Добавете два реда JavaScript код към тялото на функцията, между фигурните скоби. Първият ред трябва да чете текущото състояние на блока текст - независимо дали видимостта му е включена или изключена. В даден документ може да има няколко такива блока, така че всеки трябва да има свой собствен идентификатор - неговата функция получава id като единствен входен параметър. Използвайки този идентификатор, той търси необходимия блок в документа, като присвоява стойността видимост / невидимост (състоянието на свойството на дисплея) на променливата sDisplay: sDisplay = document.getElementById (id).style.display;
Стъпка 3
Вторият ред трябва да промени свойството на дисплея на желания текстов блок на противоположния - скрийте, ако текстът е видим, и покажете дали е скрит. Това може да се направи със следния код: document.getElementById (id).style.display = sDisplay == 'none'? '': 'нито един';
Стъпка 4
Добавете следната таблица със стилове към заглавната секция: {курсор: показалец} Това ще ви е необходимо, за да покажете правилно показалеца на мишката, когато задържите курсора на мишката върху непълен маркер за връзка. С помощта на такива връзки организирате на страницата да превключвате видимостта / невидимостта на текстовите блокове.
Стъпка 5
Поставете тези превключващи връзки в текста преди всеки скрит блок и в блоковете в края на текста добавете подобна връзка. Оградете невидим текст в маркери за обхват, които имат невидимост, зададена в техните атрибути на стил. Например: Разгъване на текст +++ Това е скрит текст --- В този пример щракването върху връзката с три плюс ще извика горната функция в събитието onClick, като й предаде идентификатора на блока, който ще бъде видим. И вътре в блока има връзка от три минуса със същите функции - щракването върху него ще скрие текста.
Стъпка 6
Създайте необходимия брой текстови блокове, подобен на описания в предишната стъпка, като не забравяте да промените идентификаторите в атрибута id на маркера span и в променливата, предадена на функцията от събитието onClick в двете връзки.
