Dokumen ini adalah terjemahan dari CSS tips & tricks - CSS: a tabbed interface dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/target

Penerjemah: Edwin Rene

Web Style Sheets
CSS tips & tricks

(Halaman ini menggunakan style sheets CSS)

selektor :target

Elemen dengan tabulasi

Pernyataan terima kasih

Pseudo-class ':target'

Sebuah URL umumnya mengarah ke sebuah halaman. Tetapi bila URL tersebut berakhir dengan "#sesuatu" hal tersebut akan menjadi target dari elemen yang spesifik dalam halaman itu. Browser biasanya berusaha untuk memastikan bahwa elemen yang di tuju dapat dilihat dan bila memungkinkan berada pada posisi puncak layar..

Dengan selektor ':target', anda dapat menambah sebuah style yang khusu ditujukan pada elemen tersebut, sehingga akan mendapat perhatian lebih.

Tetapi anda dapat melakukan lebih dari itu. Anda dapat menyembunyikan atau menampilkan elemen berdasarkan apakah mereka adalah sebuah tujuan atau tidak. Dibawah adalah sebuah contoh. Contoh menunjukkan sebuah menu kecil dengan empat hal (item) dan tiap item di hubungkan pada sebuah teks. Tetapi pada awalnya tidak ada teks yang tampak. Tiap item dihubungkan ke elemen dengan sebuah ID tujuan (#item1, #item2...) dan elemen tersebut hanya tampak bila meraka adalah tujuan dari URL yang ada pada saat itu..

Coba klik menu item tersebut dan juga lihat pada lokasi browser untuk melihat URL pada saat sekarang.

Ini adalah elemen yang berkenaan dengan item 1. hal ini tidak seharusnya kelihatan, kecuali bila anda mengikuti sebuah link yang secara eksplisit menargetkan "#item1".

Bila anda loncat ke item 2, maka elemen ini seharusnya kelihatan.

Elemen ini kelihatan bila anda mengklik menu item ketiga. Elemen tersebut memiliki URL yang juga anda dapat gunakan ditempat lain. Anda dapat menaruhnya disebuah halaman Web dan langsung pergi ke item ini.

Beginilah cara kerjanya. Ada dua bagian yang penting, sumber HTML source dan properti 'display'. Pertama dokumen HTMLnya. Dokumen tersebut memiliki link dan elemen dengan ID yang berhubungan:

<p>
<a href="#item1">item 1</a>
<a href="#item2">item 2</a>
<a href="#item3">item 3</a>
<a href="#default">clear</a>

<div class="items">
<p id="item1">... item 1...
<p id="item2">... item 2...
<p id="item3">...
<p id="default"><!-- by default, show no text -->
</div>

Aturan style tersebut pertama-tama menyembunyikan seluruh P yang berada dalam DIV tersebut, tapi kemudian mengesampingkannya untuk P yang menjadi tujuan pada saat sekarang:

div.items p {display: none}
div.items p:target {display: block}

Hanya itu. Contoh diatas kemudian menambahkan beberapa warna, margin, batasan, dsb, sehingga terlihat seperti sebuah menu. Anda dapat melihat sumber halaman ini untuk mengetahui bagaimana hal ini dilakukan..

Sebetulnya, kita menambahkan ':not(:target)', untuk memastikan bahwa hanya browser CSS3 yang akan menyembunyikan elemn terebut. Sehingga aturan yang lebih baik adalah sebagai berikut:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

Sebuah antar muka dengan tabulasi

Beigtu anda mengerti hal diatas, tidak sulit untuk bermain-main dengan membuat sebuah antar muka dengan tabulasi: sekumpulan atauran style yang tidak hanya menunukkan isi yang berbeda ketika sebuah tombol ditekan tapi juga mengubah tampilan tombol itu sendiri.

Berikut sebuah contoh. Contoh ini tidak menggunakan'display: none', tapi 'z-index'. Bila anda ingin tahu bagaimana hal ini dilakukan, tinggal lakukan "view source"…

Tab 1
Seseorang dapat berargumen bahwa…
Tab 2
… 30 baris CSS cukup banyak, dan…
Tab 3
… bahwa 2 pun seharusnya cukup, tapi…
Default
… hal tersebut bisa bekerja!

Pernyataan terima kasih

Halaman ini dibuat berdasarkan ide orisinil oleh Daniel Glazman. Lihat penjelasan pada"blog"nya pada Jan 9, 2003 dan demonstrasinya demo pada tanggal Jan 13.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Feb 2003;
last updated $Date: 2007/10/27 00:47:16 $ GMT