បង្ហាញនិងលាក់អត្ថបទឬរូបភាពដោយប្រើ CSS និង JavaScript

បង្កើតបទពិសោធន៍រចនាប័ទ្មកម្មវិធីនៅលើគេហទំព័ររបស់អ្នក

HTML ថាមវន្ត (DHTML) អនុញ្ញាតឱ្យអ្នកបង្កើតបទពិសោធកម្មវិធីរចនាប័ទ្មនៅលើគេហទំព័ររបស់អ្នក, បន្ថយប្រេកង់ថាទំព័រទាំងស្រុងត្រូវតែត្រូវបានផ្ទុកយ៉ាងពេញលេញ។ នៅក្នុងកម្មវិធីនៅពេលអ្នកចុចលើអ្វីមួយកម្មវិធីនេះផ្លាស់ប្តូរភ្លាមៗដើម្បីបង្ហាញមាតិកាជាក់លាក់ឬដើម្បីផ្តល់ឱ្យអ្នកនូវចម្លើយរបស់អ្នក។

ផ្ទុយទៅវិញទំព័របណ្ដាញជាធម្មតាត្រូវតែត្រូវបានផ្ទុកឡើងវិញឬទំព័រថ្មីទាំងមូលត្រូវតែត្រូវបានផ្ទុក។ នេះអាចធ្វើឱ្យអ្នកប្រើមានបទពិសោធច្រើនជាងមុន។ អតិថិជនរបស់អ្នកត្រូវរង់ចាំទំព័រទីមួយដើម្បីផ្ទុកហើយបន្ទាប់មករង់ចាំម្តងទៀតសម្រាប់ទំព័រទីពីរដើម្បីផ្ទុក។ ល។

ប្រើ & lt; div & gt; ដើម្បីបង្កើនបទពិសោធន៍អ្នកមើល

ការប្រើ DHTML វិធីមួយក្នុងចំណោមវិធីងាយស្រួលបំផុតដើម្បីធ្វើឱ្យបទពិសោធន៍នេះប្រសើរឡើងគឺត្រូវបិទនិងបើកធាតុ div ដើម្បីបង្ហាញមាតិកានៅពេលវាត្រូវបានស្នើ។ ធាតុ div កំណត់ការបែងចែកឡូជីខលនៅលើគេហទំព័ររបស់អ្នក។ ចូរគិតពីដបជាប្រអប់មួយដែលអាចមានកថាខណ្ឌប្រធានបទតំណភ្ជាប់រូបភាពនិងសូម្បីតែដបផ្សេងទៀត។

អ្វីដែលអ្នកត្រូវការ

ក្នុងគោលបំណងដើម្បីបង្កើតដបដែលអាចត្រូវបានបិទបើកនិងបិទអ្នកត្រូវការដូចខាងក្រោម:

តំណត្រួតពិនិត្យ

តំណគ្រប់គ្រងគឺជាផ្នែកមួយដែលងាយស្រួលបំផុត។ គ្រាន់តែបង្កើតតំណដូចដែលអ្នកចង់ទៅទំព័រមួយទៀត។ សំរាប់ពេលនេះទុកឱ្យ href attribute ទំនេរ។

រៀន HTML

ដាក់កន្លែងនេះនៅលើគេហទំព័ររបស់អ្នក។

Div ដើម្បីបង្ហាញនិងលាក់

បង្កើតធាតុ div ដែលអ្នកចង់បង្ហាញនិងលាក់។ ធ្វើឱ្យប្រាកដថាបំណែករបស់អ្នកមានលេខសម្គាល់ពិសេសនៅលើវា។ ក្នុងឧទាហរណ៍លេខសម្គាល់តែមួយគត់គឺ រៀន HTML

នេះជាជួរឈរមាតិកា។ វាចាប់ផ្តើមទទេលើកលែងតែអត្ថបទពន្យល់នេះ។ ជ្រើសរើសអ្វីដែលអ្នកចង់រៀននៅក្នុងជួរឈររុករកនៅខាងឆ្វេង។ អត្ថបទនឹងបង្ហាញដូចខាងក្រោម: div >

  • ថ្នាក់ HTML ឥតគិតថ្លៃ
  • HTML ការបង្រៀន
  • តើ XHTML គឺជាអ្វី?

    CSS ដើម្បីបង្ហាញនិងលាក់វិមាត្រ

    បង្កើតពីរថ្នាក់សម្រាប់ CSS របស់អ្នក: មួយដើម្បីលាក់ div ហើយនិងផ្សេងទៀតដើម្បីបង្ហាញវា។ អ្នកមានជម្រើសពីរសម្រាប់ការនេះ: ការបង្ហាញនិងការមើលឃើញ។

    ការបង្ហាញដកចេញវិមាត្រពីលំហូរទំព័រហើយភាពមើលឃើញគ្រាន់តែផ្លាស់ប្តូរពីរបៀបដែលវាត្រូវបានគេមើលឃើញ។ អ្នកសរសេរកូដមួយចំនួនចូលចិត្ត ការបង្ហាញ ប៉ុន្តែពេលខ្លះ ភាពមើលឃើញ ក៏មានន័យផងដែរ។ ឧទាហរណ៍:

    .hidden {display: none; } .unhidden {display: block; }

    ប្រសិនបើអ្នកចង់ប្រើភាពមើលឃើញបន្ទាប់មកផ្លាស់ប្តូរថ្នាក់ទាំងនេះទៅ:

    .hidden {ភាពមើលឃើញ: លាក់; } .unhidden {ភាពមើលឃើញ: មើលឃើញ; }

    បន្ថែមថ្នាក់ដែលលាក់ទៅឌីសរបស់អ្នកដូច្នេះវាចាប់ផ្តើមដូចជាលាក់លើទំព័រ:

    class = "hidden" >

    JavaScript ដើម្បីធ្វើឱ្យវាដំណើរការ

    ស្គ្រីបទាំងអស់នេះគឺមើលនៅថ្នាក់ដែលបានកំណត់បច្ចុប្បន្ននៅលើ div របស់អ្នកនិងបិទបើកវាដើម្បីឱ្យមិនលាក់បើវាត្រូវបានសម្គាល់ថាលាក់ឬផ្ទុយមកវិញ។

    នេះគ្រាន់តែជាបន្ទាត់ JavaScript ប៉ុណ្ណោះ។ ដាក់ខាងក្រោមនៅក្នុងក្បាលឯកសារ HTML របស់អ្នក (មុនសញ្ញា :