Artikel ini telah berbagi dengan Anda kode spesifik untuk JS untuk mengimplementasikan efek switching tab sederhana untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Kode switching tab JS:
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title><link rel="stylesheet" type = "text/css" href = "base.css" media = "all"/> <style type = "text/css"> a {color: #a0b3d6;}. tab {border: 1px solid #a0b3d6; margin: 100px; lebar: 300px;}. A {background: #eaf0fd; line-height: 30px; padding: 0 20px; display: inline-block; border-right: 1px solid #a0b3d6; border-bottom: 1px solid #a0b3d6; float: left;}. tabs-nav .on {latar belakang: white-bottom: 1px: 1px; white; _position: relatif;}. Tab-content {padding: 20px; border-top: 1px solid #a0b3d6; margin-top: -1px;} </tyle> </head> <dv id = "tabs"> <h2> <a href = "javascript:;" href = "javascript :;"> Teknologi </a> <a href = "javascript :;"> kehidupan </a> <a href = "javascript rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah rumah pulang Teknologi Teknologi Teknologi Teknologi Teknologi Teknologi Teknologi Teknologi Teknologi Teknologi Teknologi Teknologi Teknologi Teknologi </p> <p> Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Kehidupan Hidup Pekerjaan Pekerjaan Pekerjaan Pekerjaan </p> </div> <br/> <br/> <div id = "tabs2"> <h2> <a href = "javascript:;"> 11111 </a> <a href = "javascript :;"> 22222 </a> <a href = "JavaScript:;"> 33333 </a> </h2> <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111 </p> <p> 2222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222 type = "text/javascript" src = "tabs.js"> </ptript> <script type = "text/javascript"> window.onload = function () {tabs ('tab', 'klik'); tab ('tabs2', 'mouse');} </script> </body> </html>Tabs.js
Tab fungsi (id, pemicu) {var tabsbtn = document.geteLementById (id) .getElementsbyTagname ('h2') [0] .getElementsbyTagname ('a'); var tabscontent = document.geteLementById (id) .geteLementsbyTagname ('p'); untuk (var i = 0 i ++) {tabsbtn [i] .index = i; if (trigger == 'klik') {tabsbtn [i] .Onclick = function () {clearclass (); this.className = 'on'; showContent (this.index);}} lain jika (trigger == 'mouseover') {tabsbtn [i] .onmouseover = function () {clearclass (); this.className = 'on'; showContent (this.index);}}} function showContent (n) {for (var i = 0, len = tabsbtn.length; i <len; i ++) {tabscontent [i] .classname = 'hide';} tabscontent [n]. clearclass () {for (var i = 0, len = tabsbtn.length; i <len; i ++) {tabsbtn [i] .classname = '';}}}base.css
@Charset "UTF-8";/*@ Name: Base@ Function: Setel ulang gaya default browser*//*mencegah dampak warna latar belakang yang ditentukan pengguna pada halaman web, tambahkan untuk memungkinkan pengguna untuk menyesuaikan font*/html {warna: Black; latar belakang: putih;}/*margin dalam dan luar biasanya membuat posisi kinerja dari setiap posisi perampasan bROWSED DERFORMASI BERCANA DERFORMER Differension dari setiap kinerja berbeda dari setiap performa dari setiap performa dari masing-masing perampasan kinerja yang berbeda */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}/* Note that form elements do not inherit parent font*/body,button,input,select,textarea {font:12px SimSun,tahoma,arial,sans-serif;}input,select,textarea {font-size:100%;}/* Remove the margins of each Table cell and make its edges overlap */table {border-collapse: collapse; spasi batas: 0;}/* yaitu bug tetap: th tidak mewarisi teks-align*/th {text-align: wherit;}/* hapus perbatasan default*/fieldset, perbatasan {tidak ada;}/* ie6 7 8 (q) Tampilan bug sebagai representasi in-gline* oD-{api/ie6 {if. */abbr,acronym {border:none;font-variant:normal;}/* Consistent del style*/del {text-decoration:line-through;}address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:500;}/* Remove the identifier before the list, li will inherit */ol,ul {list-style:none;}/* Align is the most important factor in typeface, don't center everything */caption,th {text-align:left;}/* From yahoo, let the title be customized, Adapt to multiple system applications*/h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}q:before,q:after {Content: '';}/* Unified Superscript dan Subscript*/Sub, Sup {font-size: 75%; line-height: 0; Position: Relative; Vertical-Align: Baseline;} Sup {Top: -0.5em;} Sub {Bottom: -0.25em;}/Biarkan tautan di Ulderscore evercore {Bottom: -0.25em;}/Biarkan tautan di luar menampilkan uNDERSCORE {BOBSTAS: -0.25em;}/Biarkan tautan di luar menampilkan evlercore {Bottom: -0.25em;}/Biarkan tautan di luar menampilkan uDerscore {Bottom: -0.25em; {Text-Decoration: Underline;}/*Underscore tidak ditampilkan secara default, menjaga halaman ringkas*/INS, A {Text-Decoration: None;}/*IE6,7 Line Point Line Removal*/A: Focus,*: Fokus {oLTLINE: NOT; {clear: keduanya; overflow: tersembunyi;}. clearfix {zoom: 1; /* untuk IE6 IE7*/}. CLEAR {CLEAR: keduanya; display: blok; overflow: tersembunyi; tinggi: 0; garis-tinggi: 0; font-size: 0;}/* Setel tampilan dan sembunyikan, biasanya digunakan untuk bekerja sama dengan js*/. Sembunyikan {tidak ada! Penting; visibilitas: tersembunyi;} blok {blok: blok! {float: left; display: inline;}. fr {float: right; display: inline;}Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.