روی رویداد در CSS خالص بدون:target کلیک کنید. هدف در CSS چگونه کار می کند؟ چه در مورد معناشناسی و دسترسی

آیا راهی برای مدیریت رویدادهای کلیک در CSS بدون آن وجود دارد با استفاده از جاوا اسکریپت. می توانید از روش استفاده کنید :هدف. اما اگر قابل استفاده نباشد چه؟ روش دیگری نیز وجود دارد.

دمو را تماشا کنید. این به طور کامل در CSS ساخته شده است، نه یک خط کد جاوا اسکریپت. این بر اساس استفاده اصلی از انتخابگرهای:active و:hover است.

شرح

ابتدا باید ظرفی بسازید که حاوی دکمه و بلوک هایی باشد که با فشار دادن ماوس نمایش داده می شوند. ساختار نشانه گذاری چیزی شبیه به این خواهد بود:

  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit.
    • دکمه

    باید .content را نامرئی کنیم تا زمانی که دکمه ماوس روی .wrapper فشار داده شود. برای حل مشکل، ویژگی .content display: none را تنظیم کنید. سپس، هنگامی که دکمه ماوس روی .wrapper فشار داده می شود، ویژگی display: block را برای محتوای . اضافه می کنیم. چرا ویژگی .wrapper:active .content display: block را تنظیم کنید. در این حالت، .content تنها زمانی قابل مشاهده خواهد بود که دکمه ماوس را فشار دهید. اگر آن را آزاد کنید، محتوای . دوباره ناپدید می شود. برای رفع این مشکل، اجازه دهید مطمئن شویم که وقتی مکان‌نمای ماوس روی .content است، به عنصر خاصیت display: block اختصاص داده می‌شود. یعنی ویژگی display: block را برای .content:hover تنظیم می کنیم. کد CSS به شکل زیر خواهد بود:

    محتوا (نمایش: هیچ، ) .wrapper:active .content (نمایش: بلوک؛) .content:hover (نمایش: بلوک؛)

    تنها چیزی که باقی می ماند این است که آن را "شانه کنید" ظاهرو واضح تر بیان کنید:

    Wrapper ( موقعیت: نسبی؛ ) .button ( پس زمینه: زرد؛ ارتفاع: 20px؛ عرض: 150px؛ ) .content ( موقعیت: مطلق؛ padding-top: 20px;

    متن دکمه در کد بالا دارای پس‌زمینه زرد و اطلاعاتی که با فشردن دکمه ماوس نمایش داده می‌شوند دارای پس‌زمینه قرمز خواهند بود.

    با استفاده از شبه کلاس:target به راحتی می توانید آموزش های زیادی را در اینترنت پیدا کنید. با این حال، بیایید از کد شخص دیگری پیروی نکنیم، بلکه سعی کنیم آن را درک کنیم و بفهمیم که چگونه کار می کند؟ البته ما بدون مثال نمی توانیم انجام دهیم.

    هدف چیست؟

    در CSS:target، این یک کلاس شبه است که به شما امکان می‌دهد یک «قطعه» کامل از سند HTML خود را انتخاب کنید که برخی از اقدامات روی آن انجام می‌شود. برای مثال، این می تواند یک پاراگراف متن یا عنوان باشد.

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

    شبه طبقات:

    • a:link(color:#111)
    • a:hover(رنگ:#222)
    • div:first-child(color:#333)

    عناصر شبه:
    • p:: حرف اول (رنگ:#444)
    • p::خط اول(رنگ:#555)

    فکر می کنم از نحو مشخص باشد که این یا آن شبه کلاس یا شبه عنصر چه می کند. محبوب ترین شبه کلاس :hover است، همه وب مسترها با آن مواجه می شوند؛ سبک های یک عنصر را هنگام شناور شدن توضیح می دهد. هدف به طور مشابه کار می کند و سبک های یک عنصر را در هنگام وقوع یک موقعیت خاص توصیف می کند.

    شناسه های قطعه

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

    این تکنیک را می توان برای انتقال در یک مقاله استفاده کرد. به عنوان مثال، در ابتدای مقاله یک فهرست کوچک از مطالب ایجاد می‌کنید، وقتی روی عنصری کلیک می‌کنید که یک فرد به قسمتی که پیوند به آن منتهی می‌شود هدایت می‌شود؛ بخش باید یک شناسه اضافه کند.

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

    مدیریت یک کلیک با استفاده از:target

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

    H1 ( فونت: 30 پیکسل Arial sans-serif; ) h1:target (اندازه قلم: 50 پیکسل؛ متن-تزیین: زیر خط؛ رنگ: #37aee4؛ )

    کد بسیار ساده است - با کلیک کردن، عنوان، اندازه، رنگ خود را تغییر می دهد و زیر آن خط کشیده می شود. می توانید زندگی را اضافه کنید (روسلان، سلام) و یک انیمیشن برای تغییر رنگ عنوان بسازید:

    H1 ( فونت: 30 پیکسل Arial sans-serif؛ -webkit-transition: color 0.5s ease؛ -moz-transition: color 0.5s ease؛ -o-transition: color 0.5s ease؛ -ms-transition: color 0.5s ease. انتقال: سهولت رنگ 0.5 ثانیه؛ )

    برجسته کردن عنوان فعال چیز خوبی است، اما اگر بخواهید طراحی متنی که به دنبال آن است را تغییر دهید چه؟ CSS این فرصت را به ما می دهد. به نظر می رسد این است:

    H1:target + p (پس‌زمینه: #eaeaea؛ padding: 10px؛ )

    در این مورد، علامت مثبت به این معنی است که این سبک باید در پاراگراف زیر عنوان اعمال شود. بدین ترتیب، هنگامی که هدر فعال تغییر می کند، طراحی بخش را نیز تغییر می دهیمبا متنی که «متعلق» به اوست.

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

    شبه کلاس هدف متعلق به نسخه سوم CSS است و توسط همه مرورگرها به جز IE قدیمی‌تر از نسخه 9 کاملاً پشتیبانی می‌شود. بنابراین اگر مخاطبان شما از این مرورگر استفاده می‌کنند، نباید آن را پیاده‌سازی کنید. اگرچه، راهی برای خروج وجود دارد - این Selectvizr است، یک کتابخانه JS که با آن می توانید IE را با CSS3 کار کنید. ما فقط اسکریپت را اضافه می کنیم و تمام، کار می کند.

    تنها چیزی که وجود دارد این است که اگر از JQuery یا MooTools استفاده نمی کنید، باید آن را به هم متصل کنید تا این اسکریپت کار کند. وب سایت رسمی جدولی دارد که نشان می دهد کدام کتابخانه ها از چه چیزی پشتیبانی می کنند. اگر علاقه دارید، آن را بخوانید. این .

    نتیجه

    استفاده از کلاس های شبه ممکن است پیچیده به نظر برسد، اما زمانی که نحوه کار آنها را فهمیدید، می توانید فقط با استفاده از CSS و هیچ چیز دیگری کارهای شگفت انگیزی انجام دهید. شبه کلاس: هدف- تایید عالی این. با کمک آن می توانید تعامل یک صفحه با بازدیدکننده را به طور اساسی تغییر دهید. مثال بالا ساده ترین است، اما همچنان کمی تعامل را به صفحه اضافه می کند. اما این فقط چند خط کد است.

    در مورد زیبایی و پشتیبانی مرورگر زیاده روی نکنید و همه چیز درست خواهد شد.

    روز خوبی داشته باشید

    target="_blank برای ساخت تگ استفاده می شود لینک را در یک پنجره جدید باز کرد. اما هدف HTML چیست؟ چرا باید خالی باشد؟ و جالب ترین چیز این است که چرا در ابتدا خط زیر وجود دارد؟ بیایید نگاهی دقیق تر به این کد بیندازیم و بفهمیم چه کاری انجام می دهد.

    ویژگی هدف

    مقادیر هدف

    چهار مقدار متداول برای ویژگی target عبارتند از:

    _خود

    تنها موقعیتی که در آن این اتفاق می افتد این است که از تگ در HTML استفاده شود ، که یک روش باز کردن خاص برای همه پیوندها تعیین می کند. به عنوان مثال، اگر بین تگ ها کد زیر را اضافه کرد ، باید از target="_self" استفاده کنید تا لینک در همان پنجره باز شود.

    _جای خالی

    پیوندی را در یک برگه یا پنجره جدید باز می کند. این توسط تنظیمات محلی کاربر تعیین می شود، در اکثر مرورگرها این یک صفحه برگه جدید است. ممکن است فکر کنید که با استفاده از این مقدار می توانید واحدهای تبلیغاتی پاپ آپ را پیاده سازی کنید. اما این درست نیست. اغلب، جاوا اسکریپت برای این کار به جای HTML استفاده می شود.

    این مقدار مشخصه HTML هدف بهتر است برای باز کردن پیوندها به سایت های خارجی یا فایل های PDF در یک برگه جدید استفاده شود. به همین دلیل پس از بستن این تب ها، کاربر به سایت شما بازگردانده می شود. اما این نباید مورد سوء استفاده قرار گیرد، زیرا اگر هر پیوند در یک برگه جدید باز شود، پیمایش برای کاربر بسیار دشوار خواهد بود.

    _والدین

    مقدار _parent پیوندی را در قاب والد برای فریمی که در آن قرار دارید باز می کند. این یک مقدار محبوب نیست، زیرا برچسب هایی برای ایجاد فریم است و در HTML5 پشتیبانی نمی شوند. با این حال، این مقدار همچنان می تواند در داخل تگ ها استفاده شود