CSS болон JavaScript ашиглан текст эсвэл зургийг харуулах, нуух

Өөрийн вебсайт дээр аппликешн загварын туршлагыг бий болгох

Динамик HTML (DHTML) нь таны вебсайт дээрх аппликешн загварын туршлага үүсгэх боломжийг олгож, бүх хуудсыг бүрэн ачаалах давтамжийг багасгадаг. Аппликешн дээр та ямар нэгэн зүйл дээр дарахад тухайн агуулга нь тодорхой агуулга, эсвэл хариулт өгөхөд нэн даруй өөрчлөгддөг.

Эсрэгээр, вэбсайтууд нь ихэвчлэн дахин ачаалах хэрэгтэй, эсвэл бүхэлд нь шинэ хуудсыг ачаалах хэрэгтэй. Энэ нь хэрэглэгчийн туршлагыг илүү дэлгэрэнгүй болгож чаддаг. Таны худалдан авагчид эхний хуудсыг ачаалахыг хүлээх хэрэгтэй, дараа нь хоёр дахь хуудас ачаалахын тулд дахин хүлээх хэрэгтэй.

& Lt; div & gt; Үзэгчийн туршлагаас сайжруулах

Энэ туршлагыг сайжруулах хамгийн хялбар арга бол DHTML-ийг ашиглах нь div элементийг хүссэн үедээ агуулгыг харуулах, унтраах боломжийг олгох явдал юм. Див элемент нь таны вэб хуудсан дээрх логик хэсгүүдийг тодорхойлдог. Далд нь догол мөр, гарчиг, холбоос, зураг, тэр ч байтугай бусад дивэд агуулагдаж байж болох хайрцгийг үзээрэй.

Та юу хэрэгтэй байна

Дууг хаах, хаах боломжтой див үүсгэхийн тулд дараах зүйлсийг хийх хэрэгтэй:

Хяналтын холбоос

Хяналтын холбоос бол хамгийн хялбар хэсэг юм. Зүгээр л өөр хуудсанд хийх шиг холбоос үүсгээрэй. Одоогоор href атрибутыг хоосон үлдээнэ үү.

HTML сурах

Энэ хуудсыг хаана ч байрлуулж болно.

Div нарыг харуулах, нуух

Өөрийн харуулах, далдлахыг хүсч байгаа div элементийг үүсгэ. Таны див энэ өвөрмөц id байгаа эсэхийг шалгаарай. Жишээ нь, өвөрмөц id бол HTML сурах болно.

Энэ бол агуулгын багана. Энэ тайлбарыг текстээс өөр хоосон орхино. Зүүн талд байгаа навигацийн баганад юу сурахыг сонгох. Текст доор харагдаж байна:

HTML сурах
  • Free HTML Class
  • HTML заавар
  • XHTML гэж юу вэ?

    Div нарыг харуулах, нуух CSS

    CSS-д зориулж хоёр анги үүсгэх: нэгийг нь нуугдахын тулд нөгөө далдыг нуу. Танд энэ хоёр сонголт байна: дэлгэц ба харагдах байдал.

    Дэлгэц хуудасны урсгалаас div дүрсийг хасч, харагдах байдал нь харагдах байдлаараа өөрчлөгддөг. Зарим кодлогч нь дэлгэцийг илүүд үздэг боловч заримдаа харахад ч утга учиртай байдаг. Жишээлбэл:

    .hidden {дэлгэц: none; } .unhidden {display: block; }

    Хэрэв та алсын харааг ашиглахыг хүсч байвал эдгээр ангиудыг дараах байдлаар өөрчлөх:

    .hidden {үзэгдэх байдал: нуугдмал; } .боднол {үзэгдэх байдал: харагдана; }

    Өөрийн div дээр далд ангиллыг нэмэхийн тулд энэ хуудсанд нуугдаж эхэлнэ.

    class = "hidden" >

    Үүнийг хийх JavaScript

    Энэ скрипт нь таны скриптийн одоогийн классын харагдацыг харуулдаг бөгөөд энэ нь далд эсвэл эсрэгээр тэмдэглэгдсэн бол unhidden руу шилжих болно.

    Энэ бол зөвхөн JavaScript-ийн хэдэн мөр юм. Өөрийн HTML документын толгойг дараах байдлаар байрлуулна ( tag: