Matn yoki tasvirlarni CSS va JavaScript yordamida ko'rsatish va yashirish

Veb-saytlaringizda dastur uslubi yaratish

Dynamic HTML (DHTML) sizning veb-saytlaringizdagi dastur uslubi tajribasini yaratishga imkon beradi, bunda barcha sahifalar to'liq yuklanishi kerak bo'lgan chastotani kamaytiradi. Biror narsa ustiga bosganingizda, ilovalar darhol ma'lum tarkibni ko'rsatishi yoki sizga javob berish uchun o'zgartiriladi.

Aksincha, veb-sahifalar odatda qayta yuklanishi kerak yoki butun yangi sahifani yuklash kerak. Bu foydalanuvchi tajribasini yanada kengaytirishi mumkin. Sizning iste'molchilaringiz birinchi sahifaning yuklanishini kutib, keyin ikkinchi sahifani tiklash uchun yana kutib turishlari kerak va hokazo.

& Lt; div & gt; foydalanish; Tomoshabinlar tajribasini yaxshilash

Ushbu tajribani yaxshilashning eng qulay usullaridan biri bo'lgan DHTML dan foydalanib, div elementlari so'ralganda tarkibni ko'rsatish uchun o'chirish va o'chirish. Bir div elementi sizning veb-sahifangizdagi mantiqiy bo'linishni belgilaydi. Bo'limni paragraflar, sarlavhalar, havolalar, tasvirlar va hatto boshqa divlarni o'z ichiga oladigan quti deb tasavvur qiling.

Siz nima kerak

Yopiq va o'chirilishi mumkin bo'lgan divni yaratish uchun quyidagilar kerak:

Tekshirish havolasi

Tekshirish havolasi eng oddiy qismdir. Boshqa sahifaga o'xshagan linkni yaratishingiz mumkin. Hozircha, href xususiyatini bo'sh qoldiring.

Learn HTML

Buni veb-sahifangizda istagan joyga qo'ying.

Ko'rsatish va yashirish uchun Div

Ko'rish va yashirishni istagan div elementini yarating. Sizning divingizdagi yagona identifikatorga ega ekanligiga ishonch hosil qiling. Misolda, noyob identifikator HTMLni o'rganadi .

Ushbu kontent ustuni. Ushbu tushuntirish matnidan tashqari, u bo'sh joydan boshlanadi. Chapdagi navigatsiya ustunidan o'rganmoqchi bo'lgan narsani tanlang. Matn quyida ko'rsatiladi:

HTMLni o'rganing
  • Bepul HTML Class
  • HTML ta'limi
  • XHTML nima?

    Divani ko'rsatish va yashirish CSS

    CSS uchun ikkita dars yarating: biri divni yashirish uchun, ikkinchisi esa uni ko'rsatish uchun. Buning uchun ikkita variant mavjud: displey va ko'rinish.

    Displey, sahifa oqimidan divni yo'q qiladi va ko'rinadigan ko'rinish faqatgina qanday ko'rinishini o'zgartiradi. Ba'zi kodlovchi ekranni afzal ko'radi, lekin ba'zida ko'rinadigan narsa ham mantiqan. Masalan:

    .hidden {displey: none; } .unhidden {displey: blok; }

    Ko'rinishni ishlatmoqchi bo'lsangiz, quyidagi sinflarni o'zgartiring:

    .hidden {ko'rinishi: yashirin; }} {ko'rinishi: paydo bo'lishi; }

    Sizning sahifangizga maxfiy sinfni qo'shing, u sahifada yashirincha boshlanadi:

    class = "yashirin" >

    Buni amalga oshirish uchun JavaScript-ni

    Bu barcha skript sizning divingizdagi joriy sinfga qaraydi va uni maxfiy, yoki aksincha belgilanadigan bo'lsa, unhidden qilish uchun ochadi.

    Bu JavaScript-dan bir nechta satr. Quyidagi HTML hujjatingizni boshiga qo'ying ( tegidan oldin: