نمایش و مخفی کردن Div با جاوا اسکریپت

با استفاده از یک کد ساده جاوا اسکریپت می توانید دکمه ای ایجاد کنید که یک Div یا هر کنترل دیگر را در یک صفحه مخفی کند یا نمایش دهد.
اگر قبلا آن را مخفی کرده باشید، با کلیک روی آن دکمه آن را نمایش می دهد و با دوباره کلیک شدن روی آن دکمه Div مخفی خواهد شذ.
این کد برای طراحان وب بسیار پر کاربرد خواهد بود.
شما می توانید به تعداد دلخواه ID تعریف کنید و فقط روی آن دکمه ID دیو مورد نظر را صدا بزنید.
عکس زیر مربوط به یکی از پروژه هایی است که از این کد استفاده کرده ام و تولباری شبیه تولبار پایین فیس بوک درست کردم.
این کد ساده روی تمام مروگر ها نیز کار می کند و همچنین می توانید برای ساختن منو هایی درختی نیز از آن استفاده کنید.

کد Javascipt:

function zabet(mz) {
    var item;
    item = document.getElementById(mz);
    if (item.style.display == "none") {
        item.style.display = "inline";
    }
    else {
        item.style.display = "none"
    }
}

کد HTML:

Button Show Hide
Your Body

مولف: میثم ضابط – ۸ مهر ۱۳۸۸

مطالب مرتبط

• مطلب مرتبطی وجود ندارد

نظر ۳ برای نمایش و مخفی کردن Div با جاوا اسکریپت

1. 1
   حسین سعیدی در مهر ۱۶م, ۱۳۸۸ ۱۷:۱۰ می گوید:

   درود بر شما
   تبریک می گم، سایت جالب و مقالات جالب تری قرار دادید.
   لطفا برای هر مقاله کاربردی، یک لینک مثال و یک دانلود اسکریپت نیز قرار دهید.
   با سپاس

   اسکریپت خیلی خوبی ران کردی:
   http://www.mypagerank.ir

   پاینده باشید

2. 2
   حسین سعیدی در مهر ۱۶م, ۱۳۸۸ ۱۷:۱۷ می گوید:

   (جسارتا) ، به نظرم اگر cursor هم شبیه دست باشه، کار جذاب تر از آب در میاد:
   <div onclick=\"zabet(\’LeftDiv\’)\" style=\"cursor:pointer;\">Button Show Hide</div>

3. 3
   میثم ضابط در مهر ۱۷م, ۱۳۸۸ ۰۰:۰۳ می گوید:

   سلام
   ممنونم، لطف داری. بله پیشنهاد خیلی خوبی است. متاسفانه کمبود وقت اجازه تکمیل سایت بهم نمی ده.
   حتما در اسرع وقت تو مقالات کلابنت نمونه هم می گذارم
   بله حسین جان، ولی من با اینلاین نوشتن استایل مشکل دارم و بنظرم این روش اصولی نیست و همه استایل هامو در فایل سی اس اس می نویسم.
   آن display:none; هم واجب بود وگرنه کار نمی کرد.
   برای همین اینجا هم ننوشتم و در این مقاله هدف آموزش جاوا اسکریپت بوده، برای مثال اگر یک تصویر هم برای دکمه بگذاریم خوبه ولی خوب آن هم مربوط به فتوشاپ میشه
   در هر صورت ممنون از دقتت!

ارسال یک نظر

نام کامل (ضروری)

ایمیل (منتشر نمی شود)(ضروری)

وب سایت

کد امنیتی: