Sedikit trick penggunaan jQuery, ya, beberapa postingan ke depan saya akan membahas tentang jQuery saja. Trick ini termasuk ringan, karena hanya membahas tentang attribut sebuah element html. Perlu anda ketahui bahwa jQuery ini mempunyai kemampuan untuk memberikan attribut hanya dengan menuliskan kode ".attr", mudah bukan? Yuk kita action.

1. Membuat style, simple saja.

li {list-style:none;}
li a {text-decoration:none;color:red;}
li.aktif a{color:green;}

2. Membuat fungsi javascript

function pindahhalaman(terpilih){
 $("ul.menu > li").attr("class","");
 $("ul.menu > li#halaman"+terpilih).attr("class","aktif");
}

Jangan lupa panggil jQuery sebelum fungsi tersebut, ini penting.
3. Membuat menu, pada umumnya menggunakan element ul dan li

<ul class="menu">
  <li class="aktif" id="halaman1">
    <a href="#" onclick="pilihhalaman(1);">Halaman 1</a>
  </li>
  <li id="halaman2">
    <a href="#" onclick="pilihhalaman(2);">Halaman 2</a>
  </li>
  <li id="halaman3">
    <a href="#" onclick="pilihhalaman(3);">Halaman 3</a>
  </li>
 </ul>

Jika kesemuanya selesai dibuat dengan baik dan benar, maka di browser akan tampil seperti pada gambar di bawah.

Gambar di atas itu adalah default, jadi ketika kita memuat file tersebut, maka akan terseleksi halaman 1 (berwarna hijau). Selanjutnya Anda bisa klik halaman 2. Maka akan tampil seperti gambar di bawah:
Untuk setiap halaman yang di klik, maka akan otomatis berubah warna menjadi hijau. Menarik bukan? Tapi ingat, kesemuanya ini adalah murni hasil dari penggunaan javascript. Dan yang paling penting adalah kreatifitas Anda, karena tutorial ini sangat sederhana.

Happy Ngoprek! Sedikit trick penggunaan jQuery, ya, beberapa postingan ke depan saya akan membahas tentang jQuery saja. Trick ini termasuk ringan, karena h...