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

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

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

(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>

 .

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

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

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

 

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

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

 

6 پاسخ

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

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

  3. سلام حال شما
    وبلاگ بسیار خوبی دارید من یک وبلاگ نویس تازه کار هستم کد جاوا اسکریپت چیست لطفاً برام ایمیل کنید
    با تشکر

  4. سلام و عرض ادب
    وقت تون بخیر
    ببخشید این هم یک کد هست برای هاید کردن فیلدهای یک فرم براساس یک ورودی خاص، اما متاسفانه مشکلی دارد، لطفا امکانش هست من رو راهنمایی بفرمایید
    از لطف شما سپاس گزارم
    function morekhasi_type (type) {
    if (type==undefined)
    type=’all’;

    var a =’morekhasi_type’;
    var b =[];
    var c=[‘saati_Date’, ‘stime’ , ‘etime’];

    var b1=[];
    var c1=[‘roozane_type’,’Sdate’,’Fdate’];

    if(type==’all’){

    $ (‘#’+a).SetOnchange(function(newvalue,oldvalue) {
    show_hide_field(newvalue, a, 2, b, c);
    show_hide_field(newvalue, a, 1, b1, c1);
    });

    }

    show_hide_field($(‘#’+a).getValue(), a, 2, b, c);
    show_hide_field($(‘#’+a).getValue(), a, 1, b, c);
    }

    $(“document”).ready( function() {
    morekhasi_type();
    });

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

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