Indonesia
Untuk membantu teman, saya menulis beberapa tab sederhana dan mendedikasikannya untuk teman yang membutuhkan. 1) Panggil beberapa titik
<html> <head> <style> body { text-align:center; } .tab { width:432px height:208px margin:0 auto; } .menu,.menu li { margin:0; padding:0; tinggi:24px; gaya daftar:tidak ada; overflow:hidden; perataan teks:tengah; .menu .default { lebar:84px; float:kiri; ukuran font:10pt; tinggi baris:1,5; margin-kiri:1px; latar belakang:url('') tanpa pengulangan; aktif { lebar:84px; float:kiri; ukuran font:10pt; tinggi garis:1,5; margin-kiri:1px; kursor:berat font:tebal; tidak ada pengulangan; } #more { lebar:76px; float:kiri; ukuran font:10pt; tinggi font:1,5; margin-kiri:1px; -align:right } .con { lebar:422px; tinggi:184px; margin:0 otomatis; } </style> <head> <body> <script> fungsi init(id,kontra,dis){ document.getElementById(id ).getElementsByTagName('li')[0].className='aktif'; document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; function(){onmousOver(ids,cons,dis);}//Penunjuk tetikus memicu efek document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//klik terpicu efek} fungsi onmousOver(ids,cons,dis){ o = o ||.window.event; var obj=o.target ||. o.srcElement; className==' aktif'||obj.id=='lebih')kembali; var o=document.getElementById(ids).getElementsByTagName('li'); 1;i++) {o[i].className='default'} obj.className='aktif'; if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis +obj.id ).innerHTML;} } } </script> <!--#1--> <div class='tab'> <ul id='nav1' class='menu'> <li id=" l1" class= 'default'>Berita Pertama</li> <li id="l2" class='default'>Berita Kedua</li> <li id="l3" class='default'>Berita Ketiga</ li > <li id="l4" class='default'>Berita Keempat</li> <li id="l5" class='default'>Berita Kelima</li> </ul> <div class= ' con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>Saya sedang mencari tab di forum untuk lama sekali. Belum ada efek yang ideal</span> </div> <div id="div1_l2"> <span>Jadi saya di sini ingin bertanya pada ahlinya, mohon bantuannya! </span> </div> <div id="div1_l3"> <span>Saya menemukan beberapa perubahan, namun menu di header terlalu sulit ditemukan " div1_l4"> <span> Ini akan berubah ketika mouse diletakkan di atasnya, tidak perlu mengklik! </span> </div> <div id="div1_l5"> <span>Ditambahkan! </span> </div> </div> <skrip> init('nav1','con1',"div1_"); > <ul id='nav2' class='menu'> <li id="l1" class='default'>Berita Pertama</li> <li id="l2" class='default'>Berita Kedua </ li> <li id="l3" class='default'>Berita Ketiga</li> <li id="l4" class='default'>Berita Keempat</li> <li id="more "> <a href="#" target=_blank>Lainnya>></a></li> </ul> <div class='con' id='con2'> </div> </div> <gaya div ="display:none"> <div id="div2_l1"> <span>Saya ingin membuat tab, tetapi saya sudah lama mencarinya di forum tanpa efek yang ideal</span> </div > <div id= "div2_l2"> <span>Jadi saya di sini ingin bertanya pada ahlinya, tolong bantu saya! </span> </div> <div id="div2_l3"> <span>Saya menemukan beberapa perubahan, namun menu di header terlalu sulit ditemukan " div2_l4"> <span> Ini akan berubah ketika mouse diletakkan di atasnya, tanpa mengklik! </span> </div> </div> <skrip> init('nav2','con2',"div2_"); > <ul id='nav3' class='menu'> <li id="l1" class='default'>Berita Pertama</li> <li id="l2" class='default'>Berita Kedua </ li> <li id="l3" class='default'>Berita Ketiga</li> <li id="more" style="width:160px"><a href="#" target=_blank> Selengkapnya>> </a></li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id ="div3_l1" > <span>Saya ingin membuat tab, tetapi saya sudah lama mencarinya di forum tanpa efek yang ideal</span> </div> <div id="div3_l2"> <span>Jadi saya Saya di sini untuk bertanya pada ahlinya. Hai teman-teman, tolong bantu! </span> </div> <div id="div3_l3"> <span>Saya menemukan beberapa perubahan, namun menu di header terlalu sulit ditemukan < skrip> init('nav3','con3',"div3_"); </skrip> </body> </html>