Текстийн далд блокуудыг байрлуулах нь вэбсайтын хуудасны харааны ойлголтыг сайжруулдаг - байрлуулсан мэдээллийн хэмжээнээс үл хамааран дизайнерын зохиосон загвараар хөтөч дээр ачаалдаг. Нэмж дурдахад энэ нь зочдод илүү тохиромжтой байдаг - шаардлагатай мэдээллийн блокыг хайхдаа тэр массивыг бүхэлд нь үзэх шаардлагагүй, харин зөвхөн жижиг "мөсөн уулын үзүүрүүд" -ийг үзэх хэрэгтэй.
Энэ нь зайлшгүй шаардлагатай
HTML ба JavaScript-ийн анхан шатны мэдлэг
Зааварчилгаа
1-р алхам
Хүссэн текст блокуудыг HTML хуудсанд нууж, харуулахын тулд захиалгат JavaScript функцийг ашиглана уу. Бүх блокуудын нийтлэг функц нь тус бүрт нь код нэмж оруулахаас хамаагүй илүү тохиромжтой байдаг. Хуудасны эх кодын толгой хэсэгт нээх ба хаах скриптийн тагуудыг байрлуулж, тэдгээрийн хооронд хоосон функцийг үүсгээрэй, жишээ нь своп, шаардлагатай нэг оролтын параметр id: 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 үйл явдал дээр дуудаж, харагдах блокийн ID-г дамжуулна. Блок дотор ижил функцтэй гурван хасах холбоос байдаг - үүнийг дарахад текстийг нуух болно.
Алхам 6
Span tag-ийн id шинж чанар болон функцэд шилжүүлсэн хувьсагч дахь ID-г хоёр холбоос дээр өөрчлөхийг санаж өмнөх алхам дээр тайлбарласантай адил шаардлагатай тооны текст блокуудыг үүсгээрэй.
