قرار دادن متن های پنهان ، درک بصری یک صفحه وب سایت را بهبود می بخشد - این صفحه بدون توجه به میزان اطلاعات ارسال شده ، دقیقاً همانطور که طراح طراحی کرده است ، در مرورگر بارگیری می شود. علاوه بر این ، برای بازدید کننده راحت تر است - در جستجوی اطلاعات لازم ، نیازی نیست که کل آرایه را جستجو کند ، بلکه فقط "راهنمایی کوه های یخ" کوچک را جستجو می کند.
لازم است
دانش پایه HTML و JavaScript
دستورالعمل ها
مرحله 1
برای پنهان کردن و نمایش بلوک های متن مورد نظر در یک صفحه HTML ، از یک تابع JavaScript سفارشی استفاده کنید. یک عملکرد مشترک برای همه بلوک ها بسیار راحت تر از افزودن کد به هر یک از آنها به طور جداگانه است. در قسمت هدر کد منبع صفحه ، برچسب های اسکریپت باز و بسته را قرار دهید و بین آنها یک عملکرد خالی با نام ایجاد کنید ، به عنوان مثال swap و یک شناسه پارامتر ورودی لازم: function swap (id) {}
گام 2
بین پایه های فر ، دو خط کد JavaScript به بدنه عملکرد اضافه کنید. خط اول باید وضعیت فعلی بلوک متن را بخواند - چه دید آن روشن باشد یا خاموش. چندین بلوک از این دست در یک سند وجود دارد ، بنابراین هر یک باید شناسه خاص خود را داشته باشد - این عملکرد اوست که شناسه را به عنوان تنها پارامتر ورودی دریافت می کند. با استفاده از این شناسه ، بلوک لازم را در سند جستجو می کند ، مقدار قابل مشاهده بودن / نامرئی بودن (حالت ویژگی نمایش) را به متغیر sDisplay اختصاص می دهد: sDisplay = document.getElementById (id).style.display؛
مرحله 3
خط دوم باید ویژگی نمایش بلوک متن دلخواه را به عکس تغییر دهد - اگر متن قابل مشاهده است پنهان کنید و اگر مخفی باشد نشان دهید. این را می توان با کد زیر انجام داد: document.getElementById (id).style.display = sDisplay == "هیچکدام"؟ '': 'هیچ یک'؛
مرحله 4
صفحه سبک زیر را به قسمت هدر اضافه کنید: a {cursor: pointer} برای این که نشانگر ماوس را به درستی نشان دهید ، وقتی روی یک برچسب لینک ناقص قرار می گیرید ، به آن نیاز خواهید داشت. با کمک چنین پیوندهایی ، شما در صفحه سازماندهی می کنید تا قابلیت مشاهده / نامرئی بودن بلوک های متنی را تغییر دهید.
مرحله 5
این پیوندهای ضامن را در متن قبل از هر بلوک پنهان قرار دهید و در بلوک های انتهای متن ، یک پیوند مشابه اضافه کنید. متن نامرئی را در برچسب های دهانه محصور کنید که در ویژگی های سبک خود نامرئی هستند. به عنوان مثال: Expand text +++ این متن مخفی است --- در این مثال ، با کلیک بر روی پیوند سه به علاوه ، عملکرد فوق در رویداد onClick فراخوانی می شود و شناسه بلوکی که برای آن قابل مشاهده است به آن منتقل می شود. و در داخل بلوک پیوندی از سه منفی با عملکردهای یکسان وجود دارد - با کلیک بر روی آن متن مخفی می شود.
مرحله 6
به یاد داشته باشید که شناسه ها را در مشخصه id برچسب span و در متغیری که توسط رویداد onClick در دو پیوند به تابع منتقل شده است ، همان تعداد مورد نیاز در بلوک های متن را ایجاد کنید.
