target: یکی از انتخابگرهای نوع شبه کلاس (pseudo-class) میباشد که به ما اجازه میدهد استایل مورد نظر خود را به عنصر هدف بدهیم. با استفاده از انتخابگر target میتوانیم CSS قسمتی را که روی آن کلیک شده است، تغییر دهیم. Target موارد استفادهی بسیاری دارد. برای مثال فرض کنید جاوااسکریپت به هر دلیلی در مرورگر کاربر اجرا نشود. در اینصورت میتوانید از ترفندهای target برای پیادهسازی موارد تعاملی در صفحه استفاده کنید.
ردیاب ردیاب آهنربایی پیام بهترین وسیله برای ردیابی وسیله نقلیه 09121394944
ردیاب ردیاب آهنربایی پیام بهترین وسیله برای ردیابی وسیله نقلیه 09121394944
خودتان را اینجا معرفی کنید
به مثالهای زیر توجه نمایید:
مثال۱) مخفی کردن و نمایش محتوا
در این مثال از target برای مخفی کردن و نمایش قسمتی از محتوای صفحه استفاده شده است. فرض کنید بخواهیم قسمت نظرات در یک وبلاگ زمانی نشان داده شود که کاربر روی ان کلیک میکند. برای این کار کافی است قسمت نظرات را بجز زمانی که در حالت target قرار دارد، مخفی کنیم.
با استفاده از target میتوانیم یک منوی کشیدنی ایجاد کنیم. محل منوی کشیدنی را ثابت انتخاب کنید تا زمانیکه کاربر روی ان کلیک میکند، جابجا نشود. برای اینکه این منو بصورت کشویی وارد صفحه نمایش شود، میتوانیم از خاصیت transition برای حالت target استفاده کنیم.
در مثال اخر میخواهیم خاصیت :target را به خود عنصر <body> اعمال کرده و کل استایل صفحه را تغییر دهیم. با استفاده از این روش میتوانیم به جای اینکه به body کلاس بدهیم، تغییرات را زمانی اعمال کنیم که body در حالت target قرار گرفته است.
آیا تمامی این موارد قابل دسترسی و پیاده سازی هستند؟
زمانیکه عنصر <a> استفاده میشود، مرورگر تلقی میکند که کاربر میخواهد به صفحه و یا بخش دیگری از صفحه برود. در این مثال ها( البته به جز نمونهی آخر) نیز همین اتفاق افتاده است. تنها نکتهی موضوع این است که فقط عنصر هدف استایل دهی میشود. دو مسئلهی کوچک در اینباره وجود دارد. اول اینکه استفاده از انتخابگر target باعث میشود تا در URL انتخابی تغییراتی صورت بگیرد و همین تغییرات سابقه مرورگر کاربر را تغییر میدهد. به این ترتیب زمانیکه کاربر روی دکمهی بازگشت کلیک میکند، به صفحهی قبلی برنخواهد گشت. دوم اینکه برای بستن یک عنصر target باید کاربر به یک عنصر دیگر سوئیچ کند یا اینکه از علامت # استفاده نماید. این روش میتواند جایگزین خوبی برای زمانی باشد که نمیتوانید از جاوا اسکریپت استفاده کنید. روشی ساده و در عین حال کاربردی که میتواند شما را به جاوا اسکریپت بینیاز کند.
منبع: bitsofco
کارشناس فناوری اطلاعات، مدیر محتوا و وبلاگ نویس حوزهی فناوری