9 )  صفت عمومی tabindex :


🌟  اگر یک صفحه ی وب مانند index یک سایت اینترنتی را باز کنید ، می بینید که با زدن tab های متوالی می توانید رو لینک های صفحه حرکت کنید . در حالت پیشفرض ، این حرکت از بالا به پایین انجام می گیرد .


🌟  گاهی نیاز است که این ترتیبِ از بالا به پایین را تغییر دهیم . مثلا در یک منو بخواهیم ابتدا روی دومی بیاید و بعد روی اولی . html5 این امکان را برای ما فراهم کرده است تا هر ترتیبی که میخواهیم برای لینک های خودمان لحاظ کنیم .


🌟  برای فهمیدن نحوه ی کارکرد این صفت مطابق زیر عمل کنید :


1 ) نوت پد را باز کنید و قطعه کد زیر را در آن وارد کنید و فایل را با پسوند html. و نام دلخواه در مکان دلخواه ذخیره کرده و با مرورگر ( ترجیحا فایر فاکس ) آنرا باز کنید .


<!DOCTYPE html>
<html>

<head></head>

<body>

<a href="http://w3schools.com">W3Schools</a><br>
<a href="http://www.google.com">Google</a><br>
<a href="http://www.microsoft.com">Microsoft</a><br>
<a href="http://msn.com">msn</a>


</body>

</html>


2 ) حالا شروع کنید به زدن tab های متوالی . می بینید که از بالا به پایین روی لینک ها حرکت می کند .

3 ) حالا همین فایل را با نوت پد باز کنید و کد زیر را به جای قبلی قرار دهید و فایل را ذخیره کرده و با مرورگر باز کنید .


<!DOCTYPE html>
<html>

<head></head>

<body>

<a href="http://w3schools.com" tabindex="3">W3Schools</a><br>
<a href="http://www.google.com" tabindex="2">Google</a><br>
<a href="http://www.microsoft.com" tabindex="4">Microsoft</a><br>
<a href="http://msn.com" tabindex="1">msn</a>


</body>

</html>


4 ) اکنون شروع کنید به زدن tab های متوالی . مشاهده می کنید که به صورت جابه جا و غیر مرتب روی لینک ها حرکت می کند . این عمل ، توسط صفت tabindex انجام شده است .


🌟  نحوه ی استفاده از این صفت اینست که ابتدا لینک هایی که میخواهیم به صورت نامرتب فعال شوند را مشخص کنیم . بعد صفت tabindex را در آنها قرار دهیم و سپس به این لینک ها بر حسب ترتیبی که مد نظرمان است اعداد 1 تا n دهیم ( n برابر تعداد لینک های مدنظر ماست ) .


🌟  مثال عملی : 5 لینک داریم و میخواهیم با زدن tab های متوالی با اولویت زیر روی آنها حرکت کنیم :


سومی >  اولی  >  پنجمی  >  دومی  >  چهارمی


1 ) نوت پد را باز کنید . قطعه کد زیر را در آن وارد کنید و فایل را با پسوند html. و نام دلخواه و در مکان دلخواه ذخیره کنید



<!DOCTYPE html>
<html>

<head></head>

<body>

<a href="http://w3schools.com" tabindex="2">W3Schools</a><br>
<a href="http://www.google.com" tabindex="4">Google</a><br>
<a href="http://www.microsoft.com" tabindex="1">Microsoft</a><br>
<a href="http://msn.com" tabindex="5">msn</a><br>
<a href="http://msn.com" tabindex="3">msn</a>


</body>

</html>


همانطور که مشخص است اعدادی که tabindex لینک ها باید بگیرند به این صورت است :

سومین لینک > شماره 1

اولین لینک > شماره 2

پنجمین لینک > شماره 3

دومین لینک > شماره 4

چهارمین لینک > شماره 5


2 ) اکنون فایل را با مرورگر باز کنید و شروع کنید به زدن tab های متوالی . می بینید که دقیقا به همان اولویتی که خواستیم بین آنها جابجا می شود .


🌟  دقت کنید که لینک هایی که دارای صفت tabindex نباشد ، به همان صورت اولویت از بالا به پایین فعال می شوند .


🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود .



برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.