Tutorial 1 : Tab 3 in 1

Assalammualaikum and Annyeonghaseyo


Tutorial pertama syara -_- pfft takut orang tak faham. tutor ini direquest Kak Zawiah :D  tab ni menjimatkan ruang blog korang. refer gambar :-

Okay jom try buat :)
copy code bawah ni dan pastekan dekat  HTML/ Javascript

<style>  .tabmenu1 {  text-align:center;  width:260px;  color:#333333 ; }  a.tabmenu {  cursor:vertical-text;  background: pink;  width:84px;  text-decoration:none;  color:#333333;  display:inline-block;  padding-top:10px;  padding-bottom:10px;  text-align:center;  font:12 georgia;  letter-spacing:2px;  -webkit-transition-duration:0.5s;  }  a.tabmenu:hover {  background: #E9CFEC; color:#fff; -webkit-transition-duration:0.5s; } #menu img { max-width:260px;}  </style> <center><div class="tabmenu1"> <a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav1').innerHTML" >Tab 1</a> <a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav2').innerHTML" >Tab 2</a> <a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav3').innerHTML" >Tab 3</a> <div id="menu" style="width:260px;color:#333333;font:12px verdana;"> </div> <div id="nav1" style="display: none;"> Ayat 1 </div></div> <div id="nav2" style="display: none;"> Ayat 2 </div> <div id="nav3" style="display: none;"> Ayat 3 </div> </center>

PETUNJUK

Merah : Ubah warna ikut korang Biru : Nama Tab korang ( Tab 1, Tab 2, Tab3) ubah sendiri Oren :  Isi korang ( code2 yang korang nak)

p/s : yang "pink" tu, kalau nak tukar kepada code warna, sila tambah "#" dahulu. Harap faham Tak faham? tanyalah :D
credit : Mailey Jayley