Տեքստի թաքնված բլոկների տեղադրումը բարելավում է կայքի էջի տեսողական ընկալումը. Այն բեռնվում է զննարկչի մեջ այնպես, ինչպես դիզայներն է նախագծել այն ՝ անկախ տեղադրված տեղեկատվության քանակից: Բացի այդ, այցելուի համար դա ավելի հարմար է. Անհրաժեշտ տեղեկատվական բլոկ որոնելով, նա ոչ թե պետք է թերթի ամբողջ զանգվածը, այլ միայն «սառցաբեկորների» փոքր հուշումները:
Դա անհրաժեշտ է
HTML և JavaScript- ի հիմնական գիտելիքներ:
Հրահանգներ
Քայլ 1
Օգտագործեք հատուկ JavaScript գործառույթ ՝ HTML էջում տեքստի ցանկալի բլոկները թաքցնելու և ցուցադրելու համար: Բոլոր բլոկների համար ընդհանուր գործառույթը շատ ավելի հարմար է, քան դրանցից յուրաքանչյուրին առանձին կոդ ավելացնելը: Էջի սկզբնաղբյուրի վերնագրի մասում տեղադրեք սցենարի բացման և փակման պիտակները, և դրանց միջև ստեղծեք դատարկ գործառույթ անունով, օրինակ ՝ փոխանակում և մեկ անհրաժեշտ մուտքային պարամետր ID ՝ ֆունկցիայի փոխանակում (id) {}
Քայլ 2
Գանգուր ամրացումների միջև գործառույթի մարմնին ավելացրեք JavaScript կոդի երկու տող: Առաջին տողը պետք է կարդա տեքստի բլոկի ներկայիս վիճակը `անկախ նրա տեսանելիությունից, այն անջատված է: Փաստաթղթում կարող են լինել մի քանի այդպիսի բլոկներ, ուստի յուրաքանչյուրը պետք է ունենա իր նույնացուցիչը. Դա նրա գործառույթն է, որը ստանում է id- ը ՝ որպես միակ մուտքային պարամետր: Օգտագործելով այս նույնացուցիչը, այն որոնում է փաստաթղթում անհրաժեշտ բլոկը ՝ sDisplay փոփոխականին նշանակելով տեսանելիության / անտեսանելիության արժեքը (ցուցադրման հատկության վիճակը).
Քայլ 3
Երկրորդ տողը պետք է փոխի ցանկալի տեքստի ցուցիչի հատկությունը հակառակը `թաքցնի, եթե տեքստը տեսանելի է, և ցույց տա, արդյոք այն թաքնված է: Դա կարելի է անել հետևյալ ծածկագրով. Document.getElementById (id).style.display = sDisplay == 'չկա': '': 'ոչ ոք';
Քայլ 4
Վերնագրի բաժնում ավելացրեք հետևյալ ոճերի թերթը. A {cursor: pointer} Դա ձեզ հարկավոր կլինի մկնիկի ցուցիչը ճիշտ ցուցադրելու համար, երբ սավառնել եք անավարտ հղման պիտակի վրա: Նման հղումների օգնությամբ դուք էջում կազմակերպում եք տեքստային բլոկների տեսանելիություն / անտեսանելիություն փոխելու հնարավորություն:
Քայլ 5
Տեղադրեք այս անջատիչ հղումները տեքստի մեջ յուրաքանչյուր թաքնված բլոկից առաջ, իսկ տեքստի վերջում գտնվող բլոկներում ավելացնել նմանատիպ հղում: Անտեսանելի տեքստը կցեք span պիտակներում, որոնք իրենց ոճի հատկանիշներում ունեն անտեսանելիություն: Օրինակ ՝ ընդլայնել տեքստը +++ Սա թաքնված տեքստ է --- Այս օրինակում, երեք գումարած հղման վրա կտտացնելով, կանչելու է վերևի գործառույթը onClick իրադարձության վրա ՝ դրան փոխանցելով տեսանելի դարձվող բլոկի ID- ն: Եվ բլոկի ներսում կա միևնույն գործառույթներով երեք մինուսների հղում. Դրա վրա կտտացնելը կթաքցնի տեքստը:
Քայլ 6
Ստեղծեք պահանջվող քանակի տեքստային բլոկներ `նախորդ քայլում նկարագրվածի նման, հիշելով փոխել span պիտակի id հատկանիշի և երկու հղումների վրա onClick իրադարձության գործառույթին փոխանցված փոփոխականի ID- ները:
