Tabindex Attribute <small>HTML5</small>

Hari ke hari menemukan lagi variabel HTML5 yang unik. Dari awal heran melihat atribut html-5 mengenai Placeholder sampai tingkat rumit pemakaian tag label dengan canvas menggunakan jquery. Pada artikel sebelumnya Koben juga pernah berbagi beberapa bahasa anyar dari HTML5 juga kan tidak ada aktifitas!
Saya pribadi memang suka penasaran jika menemukan suatu hal baru. Ini kok bisa jadi gini, itu kok bisa begitu dan seabrek unek² dari hebatnya bahasa HTML. Kesempatan sekarang tertegun dengan bahasa HTML5 tabindex Attribute. Apakah itu? Atribut tabindex (tombol Tab pada keyboard) yang bisa kita gunakan menjadi sebuah navigasi sederhana. Didukung di semua browser utama, kecuali Safari Pemakaian tabindex cukup simpel, tinggal kita sisipkan saja dengan cara menambahkan variabel tabindex="number"

Contoh pemakaian atribut tab index di dalam syntax link.

Google
Beben Koben
Ben Tools<a href="http://www.google.com/" tabindex="1" target="_blank">Google</a>Setelah benar keberadaan arah tab, diikuti dengan memencet tombol enter. Mungkin sobat sudah pada tahu dengan fungsi pemencetan tombol Tab pada keyboard. Tapi tidak tahu bahwasannya itu merupakan bagian dari bahasa HTML5 kan ;))

Bagaimana bila ternyata atribut tab-index ini bisa kita kreasikan menjadi satu trik menyembunyikan sesuatu ;)) Klik pada title untuk melihat yg tersembunyi (coba pake tab button keyboard), dan klik di area kosong untuk menyembunyikannya kembali ;)

Demo Tabindex Variable

Be your self!Beben Koben si bloglang anu ganteng kalem tea.

Don't Open Pliss!!!
Hehehe...:P

CSS Coded

.tabindex{
position: relative;
display: block;
width: auto;
}
.tabindex .ti{
display: none;
} 
.tabindex:focus .ti{
display: block;
}

Itu code default CSS yg membangun tabindex. Tambahkan variabel CSS lain sesuai dengan kreasi kalian :)

Markup HTML

<span class="tabindex" tabindex="number">
Click here!
<span class="ti">
<img src="http://link-image.jpg" alt=""/>
</span>
</span>Ganti tulisan number dengan angka WTF sesuai keperluan :D Mission complete, good luck :)
Happy tabindex \m/