Мәтіннің жасырын блоктарын орналастыру веб-сайттың визуалды қабылдауын жақсартады - ол орналастырылған ақпараттың көлеміне қарамастан, шолушыға дизайнер қалай жобаласа, дәл солай жүктеледі. Сонымен қатар, келушіге бұл ыңғайлы - қажетті ақпарат блогын іздеу үшін оған бүкіл массивті қараудың қажеті жоқ, тек кішкентай «айсбергтердің ұштарын» қарау керек.
Бұл қажетті
HTML және JavaScript туралы қарапайым білім
Нұсқаулық
1-қадам
HTML парағында мәтіннің қажетті блоктарын жасыру және көрсету үшін арнайы JavaScript функциясын қолданыңыз. Барлық блоктар үшін жалпы функция олардың әрқайсысына кодты бөлек қосқаннан гөрі ыңғайлы. Парақтың бастапқы кодының тақырып бөлімінде ашылатын және жабылатын сценарий тегтерін орналастырыңыз, және олардың арасында бос функция құрыңыз, мысалы, своп және бір енгізу параметрінің қажетті параметрі: function swap (id) {}
2-қадам
Функцияның негізгі бөлігіне, бұйра жақшалардың арасына JavaScript кодының екі жолын қосыңыз. Бірінші жолда мәтін блогының ағымдағы күйі оқылуы керек - оның көрінуі қосулы немесе өшірулі. Құжатта осындай бірнеше блоктар болуы мүмкін, сондықтан әрқайсысының жеке идентификаторы болуы керек - бұл тек кіріс параметрі ретінде id алатын оның функциясы. Осы идентификаторды пайдаланып, көріну / көрінбеу мәнін (дисплей қасиетінің күйін) sDisplay айнымалысына тағайындай отырып, құжаттағы қажетті блокты іздейді: sDisplay = document.getElementById (id).style.display;
3-қадам
Екінші жол қажетті мәтіндік блоктың дисплей қасиетін керісінше өзгертуі керек - егер мәтін көрініп тұрса, жасырыңыз, ал егер ол жасырын болса, оны көрсетіңіз. Мұны келесі кодпен жасауға болады: document.getElementById (id).style.display = sDisplay == 'none'? '': 'жоқ';
4-қадам
Тақырып бөліміне келесі стильдер кестесін қосыңыз: a {cursor: pointer} Толтырылмаған сілтеме тегінің үстіне жылжытқан кезде тінтуір көрсеткішін дұрыс көрсету үшін сізге бұл қажет болады. Осындай сілтемелердің көмегімен сіз парақта мәтіндік блоктардың көрінуін / көрінбейтіндігін ауыстыруды ұйымдастырасыз.
5-қадам
Мәтінге осы жасырын сілтемелерді әр жасырын блоктың алдына қойыңыз, ал мәтіннің соңындағы блоктарға ұқсас сілтемені қосыңыз. Көрінбейтін мәтінді стиль төлсипаттарында көрінбейтіндігі бар аралық тегтерге қойыңыз. Мысалы: Мәтінді кеңейту +++ Бұл жасырын мәтін --- Бұл мысалда үш плюс сілтемесін басу арқылы onClick оқиғасында жоғарыда аталған функцияны шақыруға болады, оған блоктың көрінетін кодын жібереді. Ал блоктың ішінде бірдей функциялары бар үш минустың сілтемесі бар - оны басу мәтінді жасырады.
6-қадам
Span тегінің id атрибутындағы және екі сілтемедегі onClick оқиғасы арқылы функцияға берілген айнымалыдағы идентификаторларды өзгертуді ұмытпай, алдыңғы қадамда сипатталғанға ұқсас мәтіндік блоктардың қажетті санын жасаңыз.
