سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

سبد خرید خالی می باشد
مبلغ کل
0
تسویه حساب

کاربردهای انتخاب‌گر target در CSS
حميد  شریفی
حميد شریفی
تعداد کل دانلود ها : 580091
تعداد کل مطالب : 1137

کاربردهای انتخاب‌گر target در CSS

تعداد دانلود:
0
تعداد بازدید:
2007
تاریخ:
۱۳۹۵-۱۰-۱۱
دسته بندی:

هشتگ ها :

#

target: یکی از انتخاب‌گرهای نوع  شبه کلاس (pseudo-class) می‌باشد که به ما اجازه می‌دهد استایل مورد نظر خود را به عنصر هدف بدهیم. با استفاده از انتخاب‌گر target می‌توانیم  CSS قسمتی را که روی آن کلیک شده است، تغییر دهیم. 
Target موارد استفاده‌ی بسیاری دارد. برای مثال فرض کنید جاوااسکریپت به هر دلیلی در مرورگر کاربر اجرا نشود. در اینصورت می‌توانید از ترفندهای target  برای پیاده‌سازی موارد تعاملی در صفحه استفاده کنید.

 

به مثال‌های زیر توجه نمایید:

مثال۱) مخفی کردن و نمایش محتوا

در این مثال از target برای مخفی کردن و نمایش قسمتی از محتوای صفحه استفاده شده است. فرض کنید بخواهیم قسمت نظرات در یک وبلاگ زمانی نشان داده شود که کاربر روی ان کلیک می‌کند. برای این کار کافی است قسمت نظرات را بجز زمانی که در حالت target قرار دارد، مخفی کنیم.
 

<a href="#comments">Show Comments</a>

<section id="comments">  
    <h3>Comments</h3>
    <!-- Comments here... -->
    <a href="#">Hide Comments</a>
</section>  

 


#comments:not(:target) {
    display: none;
}
#comments:target {
    display: block;
}

مثال ۲) ساختن منوی کشویی

با استفاده از target  می‌توانیم یک منوی کشیدنی ایجاد کنیم. محل منوی کشیدنی را ثابت انتخاب کنید تا زمانیکه کاربر روی ان کلیک می‌کند، جابجا نشود. برای اینکه این منو بصورت کشویی وارد صفحه نمایش شود، می‌توانیم از خاصیت transition برای حالت  target استفاده کنیم.
 


#nav {
    position: fixed;
    top: 0;
    height: 100%;
    width: 80%;
    max-width: 400px;
}

#nav:not(:target) {
    right: -100%;
    transition: right 1.5s;
}

#nav:target {
    right: 0;
    transition: right 1s;
}

مثال ۳) ساخت پنجره‌ی مودال(Modal)  پاپ‌آپ

در این مثال می‌خواهیم یک پنجره‌ی مودال ایجاد کنیم که تمامی صفحه را پر می‌کند.
 

#modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    width: 70%;
    background: #fff;
    padding: 20px;
    text-align: center;
}

#modal-container:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 1s;
}

#modal-container:target {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 1s;
}

مثال ۴) تغییر در سبک کلی

در مثال اخر می‌خواهیم خاصیت :target را به خود عنصر

اعمال کرده و کل استایل صفحه  را تغییر دهیم. با استفاده از این روش می‌توانیم به جای اینکه به body کلاس بدهیم، تغییرات را  زمانی اعمال کنیم که body در حالت target قرار گرفته است.
 


#body:not(:target) {
    main { width: 60%; }
    aside { width: 30%; }
    .show-sidebar-link { display: none; }
}

#body:target {
    main { width: 100%; }
    aside { display: none; }
    .hide-sidebar-link { display: none; }
}

آیا تمامی این موارد قابل دسترسی و پیاده سازی هستند؟

زمانیکه عنصر استفاده می‌شود، مرورگر تلقی می‌کند که کاربر می‌خواهد به صفحه‌ و یا بخش دیگری از صفحه برود.  در این مثال ها( البته به جز نمونه‌ی آخر) نیز همین اتفاق افتاده است. تنها نکته‌ی موضوع این است که فقط عنصر هدف استایل دهی می‌شود. 
دو مسئله‌ی کوچک در اینباره وجود دارد.
اول اینکه استفاده از  انتخاب‌گر target باعث می‌شود تا در URL انتخابی تغییراتی صورت بگیرد و همین تغییرات سابقه مرورگر کاربر را تغییر می‌دهد. به این ترتیب زمانیکه کاربر روی دکمه‌ی بازگشت کلیک می‌کند، به صفحه‌ی قبلی برنخواهد گشت.
دوم اینکه برای بستن یک عنصر target  باید کاربر به یک عنصر دیگر سوئیچ کند یا اینکه از علامت # استفاده نماید. 
این روش می‌تواند جایگزین خوبی برای زمانی باشد که نمی‌توانید از جاوا اسکریپت استفاده کنید. روشی ساده و در عین حال کاربردی که می‌تواند شما را به جاوا اسکریپت بی‌نیاز کند.

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

ملت وب در سال 1393 فعالیت خود را در چهار بخش قالب های آماده، طراحی لوگو، طراحی سایت، طراحی بنر آغاز کرده است، که در مدت بسیار کم با تلاش های بی وقفه خود و همکاران توانسته بزرگترین وب سایت ارائه دهنده قالب های با کیفیت در ایران باشد رمز موفقیت شرکت ملت وب پشتیبانی بی دریغ از کاربران خود می باشد ما موقعیت خود را مدیون مشتریان وفادار خود هستیم پس همیشه همراهشان خواهیم بود .

  • logo-samandehi