نمایش و مخفی کردن Div با جاوا اسکریپت
کدی برای مخفی یا نمایش دادن یک قسمت در سایت.
این کد برای طراحان وب بسیار پر کاربرد خواهد بود.
شما می توانید به تعداد دلخواه ID تعریف کنید و فقط روی آن دکمه ID دیو مورد نظر را صدا بزنید.
با صدا زدن اگر آن DIV یا هر قسمتی از سایت مخفی باشد نمایش داده می شود و اگر در حال نمایش باشد مخفی می شود.
عکس زیر مربوط به یکی از پروژه هایی است که از این کد استفاده کرده ام و تولباری شبیه تولبار پایین فیس بوک درست کردم.
این کد ساده روی تمام مروگر ها نیز کار می کند و همچنین می توانید برای ساختن منو هایی درختی نیز از آن استفاده کنید.
کد 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
مولف: میثم ضابط – ۸ مهر ۱۳۸۸
نویسنده: میثم ضابط
من دانسته هایم را برای شما به اشتراک می گذارم شما نیز مطلبم را به اشتراک بگذارید.
جهت دریافت آخرین مطالب در ایمیلتان
(جسارتا) ، به نظرم اگر cursor هم شبیه دست باشه، کار جذاب تر از آب در میاد:
<div onclick=\"zabet(\’LeftDiv\’)\" style=\"cursor:pointer;\">Button Show Hide</div>
سلام
ممنونم، لطف داری. بله پیشنهاد خیلی خوبی است. متاسفانه کمبود وقت اجازه تکمیل سایت بهم نمی ده.
حتما در اسرع وقت تو مقالات کلابنت نمونه هم می گذارم
بله حسین جان، ولی من با اینلاین نوشتن استایل مشکل دارم و بنظرم این روش اصولی نیست و همه استایل هامو در فایل سی اس اس می نویسم.
آن display:none; هم واجب بود وگرنه کار نمی کرد.
برای همین اینجا هم ننوشتم و در این مقاله هدف آموزش جاوا اسکریپت بوده، برای مثال اگر یک تصویر هم برای دکمه بگذاریم خوبه ولی خوب آن هم مربوط به فتوشاپ میشه
در هر صورت ممنون از دقتت!
باسلام میخواستم یک بخش نظر خواهی برای سایتم بگذارم اگر کمکم کنید خیلی ممنون میشوم
آقا دمت گرم از آموزشت.
ممنون جالب بود ، مرسی.
سلام
لطفا به این سوال جواب بدید خیلی مهم هست
استفاده از کد دیو
style=”display:none”
display:none
که برای مخفی کردن هر چیزی استفاده میشه آیا از نظر گوگل مشکلی نداره ؟
سایت رو اسپم و بن نمیکنه ؟
سلام آقای محسن
خیر به صورت پیش فرض مشکلی ندارد اما اگر فقط حاوی یک سری لینک یا متن مهم باشد مشکل زا می شود. سعی شود تا جای ممکن قسمتی به این شکل برای سئو طراحی نشود.
سلام
میشه یه کدی بهش اضافه کرد که بعد از کلیک نوشته ای که میذاریم که میگه کلیک کنید حذف بشه یا اگه عوض بشه بهتره
ممنون میشم راهنمایی کنید
با تشکر از شما دوست عزیز مطلب بدرد بخوری گذاشتین.از لطفتون ممنون.