لوگو داده پردازان مدرن
0
هیچ محصولی در سبد خرید نیست.

برای مشاهده لیست علاقه مندی ها وارد شوید!

مشاهده محصولات فروشگاه

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

دسته بندی :برنامه نویسی, جاوا اسکریپت - JavaScript
کد جاوا اسکریپت نمایش و مخفی کردن آیتم

یک کد بسیار ساده و تمیز برای نمایش و مخفی کردن قسمتی از صفحه وب

(div hide and show)

سلام؛
برای اکثر وب مسترها های پیش آمده که خواستند بازدید کنندگان با کلیک بر روی آیتمی ، آیتم دیگری برایشان نمایش داده شود.

اگر شما هم نیاز به این مورد دارید ، در ادامه ساده ترین راه حل ممکن با جاوا اسکریپت را خواهید آموخت.

 

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

ابتدا کد زیر را بین دو تگ head در صفحه خود قرار دهید:

<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>

 .

کد زیر را هم در قسمتی از صفحه بین تگ​های body قرار دهید:

( عملا کد زیر را دقیقا همانجایی که میخواهید آیتم مورد نظر قرار بگیرد ، درج کنید.)

<a href="#" onclick="showhide('script'); return(false);">نمایش/مخفی</a></p>

<div style="display: none;" id="script"> 
این قسمت، مخفی و آشکار می شود
</div>

 .

استفده از کد جاوا اسکریپت نمایش و مخفی کردن آیتم در وردپرس و جمولا و …

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

برای این منظور : در قسمت افزودن نوشته و یا برگه ، با مراجعه به ویرایشگر متنی ، میتوانید کد بالا را در هرکجای نوشته که بخواهید ، قرار دهید.

 

حالا نتیجه را چیزی شبیه به صفحه زیر خواهید دید:
برای مشاهده نتیجه، اینجا کلیک کنید.

اقتباس شده از : آفتابگردان

 

مطالب زیر را حتما بخوانید:

  1. آواتار ناصرناصر گفته؛
    12:18 1397/11/02

    سلام دوست عزیز سوالی داشتم کدی وجود داره که وقتی نشانه ماوس روی چیزی که مد نظر شماست بیاد بدون کلیک طرف صفحه جداگانه باز بشه مثل جذب باشه

    • سلام بر شما
      بنده چنین کدی رو نمیدونم ؛ جستجو کنید در اینترنت…

  2. آواتار نسریننسرین گفته؛
    08:45 1398/04/28

    سلام
    وقت بخیر
    صفحه html ی باهمین کدها میخوام تو اندروید اجرا بشه باید چیکارکنم؟

    • سلام
      به طور کامل منظورتون رو متوجه نشدم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

لینک کوتاه: