target:

انتخابگر target: از انتخابگرهای نوع pseudo-class می باشد و این امکان را به ما می دهد تا بتوانیم زمانی که بر روی لینک داخلی کلیک شد, CSS آن قسمتی که هدف لینک هست را تغییر دهیم.

قطعا شما با لینک های داخلی یک صفحه آشنایی دارید همان هایی که با # تعریف می شوند. استفاده از این لینک ها زمانی است که ما بخواهیم کاربر با کلیک بر روی آن لینک به قسمت یا بخش خاصی از همان صفحه منتقل شود. به عنوان مثال کد زیر را در نظر بگیرید:


<a href="#section"> لینک داخلی </a>
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
<section id="section"> قسمتی خاص در همان صفحه </section>

اگر قسمتی که هدف ما برای انتقال کاربر به آنجا است در صفحه دیگری باشد کافی است به آن قسمت در صفحه دیگر به روش بالا id بدهیم و آدرس لینک را به صورت زیر تعریف کنیم:

<a href="complete-page-address/#section"></a>

<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->

<!-- قسمت مورد نظر در صفحه ای دیگر -->
<section id="section"></section>

به عنوان مثال می خواهیم زمانی که قسمت مورد نظر در دید کاربر قرار گرفت رنگ پس زمینه اش تغییر کند, داریم:


section:target
{
  background-color: yellow;
}

این CSS می گوید: ای تگِ section زمانی که هدفِ (target) لینک داخلی شدی رنگت باید زرد شود ;)

مثال زیر را بررسی کنید.

See the Pen :target selector by Mojtaba Seyedi (@seyedi) on CodePen.

    حال اگر بخواهیم مثالمان را کاربردی کنیم به طوری که کاربر فقط در لحظه اولی که قسمت هدف جلوی دیدش قرار می گیرد فقط و فقط یک لحظه پس زمینه را رنگی ببیند و بعد از آن لحظه رنگ به حالت اول بازگردد. در واقع می خواهیم قسمت مورد نظر را highlight کنیم تا اثر بهتری در دید و تمرکز کاربر داشته باشد. برای این کار کافی است به وسیله animation ها در CSS برای یک لحظه پس زمینه را رنگی کنیم و بعد رنگش را به حالت اول بازگردانیم, داریم:


section:target
{
  animation: highlight .8s ease-out;
}

@keyframes highlight
{
  0%   { background-color: #FFFF66; }
  100% { background-color: #FFFFFF; }
}

  مثال را ببینید:  

 

See the Pen using :target by Mojtaba Seyedi (@seyedi) on CodePen.


 

قطعا برای استفاده از این قابلیت ایده هایی به ذهن شما هم خواهد رسید که می توانیم با هم به اشتراک بگذاریم. به عنوان آخرین مطلب ایده جالب ساخت یک گالری تصویر با کمک این قابلیت CSS که در سایت موزیلا دیدم را با هم می بینیم.

 

See the Pen Image gallery using :target by Mojtaba Seyedi (@seyedi) on CodePen.


 

پشتیبانی مرورگرها

target: در مرورگرهای کروم, فایرفاکس,سافاری, اپرا +9.5 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.

مطالب مرتبط

19 دیدگاه برای “target:”

  6. سلام -مرسی از مطالب خوبتون عالی بود
    آقا مجتبی من یه سوال داشتم اگه ما در یک صفحه یک عکس داریم بخواییم روی اون کلیک کنیم بره صفحه بعد روی سطر مورد نظر از چه دستوری باید استفاده بکنیم ؟؟ممنون میشم راهنمایی بکنید

    پاسخ

  7. سلام -مرسی از مطالب خوبتون عالی بود
    آقا مجتبی من یه سوال داشتم اگه ما در یک صفحه یک عکس داریم بخواییم روی اون کلیک کنیم بره صفحه بعد روی سطر مورد نظر از چه دستوری باید استفاده بکنیم ؟؟ممنون میشم راهنمایی بکنید

    پاسخ

  13. خیلی خوب و کاربردی!
    من این مثال آخر (گالری) رو باتوجه به بحث position که اتفاقا اونم امروز از سایت شما یاد گرفتم بهترش کردم :)
    الان وقتی روی هر کدوم از لینک ها کلیک میکنی میره پایین و فقط عکس رو نشون میده و بنابراین لینک های بعدی از دست میره، ولی اگه مقدار top رو در تارگت به صفر برسونیم و به جاش padding-top رو روی 60 بگذاریم، دیگه با هر کلیک ما، لینک ها از دست نمیرن.

    پاسخ

  14. سوال؛ سلام من از این کد در سایتم استفاده کردم. چناچنه کاربر در موبایلش در بالای صفحه بر روی لینک کلیک کند و به قسمت سایدبار منتقل شود. انتقال انجام میگیره ولی دقیقا به محل سایدبار نمی رسه. اگر بخواهم کمی هم پایینتر بره باید چکار کنم؟

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

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