مخفی کردن و نمایش تگ div با JavaScript
سلام
وب سایت های بسیاری هستند که بعضی محتویات رو مخفی کردن و وقتی شما روی یک دکمه کلیک میکنید محتوا نمایش داده میشود، اینکار را با کمک JavaScript میتوان انجام داد، در ادامه همراه بپرسم باشید تا یک دکمه در صفحه قرار دهیم تا با کلیک روی دکمه محتوای تگ <div> نمایش داده شود.
مخفی کردن div با Js
شکل کلی دستور به این صورت است که اگر تگ مخفی باشد نمایش داده میشود و بالعکس:
|
۱ |
$( ".<elementId>" ).toggle(); |
- بیاید مثالی بزنیم:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Toggle Demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <button>Toggle</button> <p>Hello</p> <p style="display: none">Legend Blogs User</p> <script> $( "button" ).click(function() { $( "p" ).toggle(); }); </script> </body> </html> |
تمام کدهایی که نیاز داشتیم،؛ همینا بود! حالا بریم تا یکم جذاب تر کنیم …
انیمیشن:
برای جذاب تر شدن بیاید و یک انیمیشن نیز به کدها اختصاص بدیم، خیلی ساده میتوانید انیمیشن را اضافه کنید، کد زیر سرعت پنهان و آشکار شدن را ۶۰۰ میلی ثانیه میکند:
|
۱ ۲ ۳ ۴ ۵ |
<script> $( "button" ).click(function() { $( "p" ).toggle( "slow" ); }); </script> |
کار به همین سادگی بود 🙂 همراه ما باشید تا در ادامه تکه کدهای کاربردی بیشتری از جاوا اسکریپت را برایتان بیاوریم.
چنانچه مشکلی در رابطه با این آموزش داشتید در بخش پرسش و پاسخ سایت میتوانید سوال خود را بپرسید.
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید