Тексттин жашыруун блокторун жайгаштыруу веб-баракчанын визуалдык кабылдоосун жакшыртат - жайгаштырылган маалыматтын көлөмүнө карабастан, дизайнер кандай иштеп чыкса, ошондой браузерге жүктөлөт. Мындан тышкары, келген адам үчүн ыңгайлуураак - керектүү маалымат блогун издөө үчүн ал массивди толугу менен карап чыгуунун кажети жок, болгону кичинекей "айсбергдердин учтарын" гана издейт.
Ал зарыл
HTML жана JavaScript боюнча негизги билим
Нускамалар
1 кадам
HTML баракчасында тексттин каалаган блокторун жашыруу жана көрсөтүү үчүн колдонуучунун JavaScript функциясын колдонуңуз. Бардык блоктор үчүн жалпы функция, алардын ар бирине өзүнчө код кошконго караганда, кыйла ыңгайлуу. Барактын баштапкы кодунун баш бөлүгүнө сценарийлердин ачылышын жана жабылышын белгилеп, алардын ортосунда ысым менен бош функция түзүңүз, мисалы, своп жана бир талап кылынган киргизүү параметринин идентификатору: function swap (id) {}
2-кадам
Тармал кашалардын арасына, функциянын тулку бөлүгүнө эки сап JavaScript кодун кошуңуз. Биринчи сапта тексттин блогунун учурдагы абалы - анын көрүнүп турушу же өчүрүлбөшү керек. Документте мындай блоктор бир нече болушу мүмкүн, ошондуктан алардын ар биринин өзүнчө идентификатору болушу керек - бул идентификаторду бир гана киргизүү параметр катары кабыл алган функция. Бул идентификатордун жардамы менен sDisplay өзгөрмөсүнө көрүнөө / көрүнбөө маанисин (дисплей касиетинин абалын) ыйгарып, документтеги керектүү блокту издейт: sDisplay = document.getElementById (id).style.display;
3-кадам
Экинчи сап тексттин каалаган блогунун дисплей касиетин тескерисинче өзгөртүшү керек - текст көрүнүп турса жашыр, ал эми жашыруун болсо көрсөт. Муну төмөнкү код менен жасоого болот: document.getElementById (id).style.display = sDisplay == 'none'? '': 'none';
4-кадам
Төмөнкү стилдик таблицаны баш бөлүмүнө кошуңуз: a {cursor: pointer} Толук эмес шилтеме тегинин үстүнө жылдырганда, чычкан көрсөткүчүн туура көрсөтүү үчүн, бул керек болот. Ушундай шилтемелердин жардамы менен, сиз баракчада тексттик блоктордун көрүнүп / көрүнбөсүн алмаштырасыз.
5-кадам
Ушул которулуучу шилтемелерди ар бир жашырылган блоктун алдына, ал эми тексттин аягындагы блокторго окшош шилтемени кошуңуз. Көрүнбөгөн текстти стиль атрибуттарында орнотулган көрүнбөгөндүктү камтыган аралык тегдерине киргизиңиз. Мисалы: Expand text +++ Бул жашыруун текст --- Бул мисалда үч плюс шилтемесин чыкылдатып, onClick окуясындагы жогорудагы функцияны чакырып, ага көрүнүп турган блоктун идентификаторун өткөрүп бересиз. Ал эми блоктун ичинде бирдей функциясы бар үч минустун шилтемеси бар - аны чыкылдатуу менен текст жашырылат.
6-кадам
Мурунку кадамда сүрөттөлгөндөй тексттик блоктордун керектүү санын түзүңүз, эки шилтемедеги onClick окуясы функцияны өткөрүп берүүчү атрибуттагы жана өзгөрүлмө коддогу ID атрибутундагы IDлерди өзгөртүүнү унутпаңыз.
