บทความนี้ได้แชร์รหัสเฉพาะสำหรับ JS เพื่อใช้เอฟเฟกต์การสลับแท็บอย่างง่ายสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
รหัสสลับแท็บ JS:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "generator" content = "editPlus®"> <meta name = "uther" content = ""> type = "text/css" href = "base.css" media = "all"/> <style type = "text/css"> a {color: #a0b3d6;}. แท็บ {border: 1px solid #a0b3d6; A {background: #EAF0FD; ความสูงบรรทัด: 30px; padding: 0 20px; display: inline-block; ชายแดนขวา: 1px solid #a0b3d6; ขอบล่าง: 1px solid #a0b3d6; float: ซ้าย;}. tabs-nav. White; _position: ญาติ;}. แท็บ-เนื้อหา {padding: 20px; border-top: 1px solid #a0b3d6; margin-top: -1px;} </style> </head> <body> <div id = "แท็บ"> <h2> <a href = "javascript:; href = "JavaScript:;"> เทคโนโลยี </a> <a href = "JavaScript:;"> ชีวิต </a> <a href = "JavaScript:;"> งาน </a> </h2> <p> บ้านบ้านบ้านกลับบ้าน เทคโนโลยีเทคโนโลยีเทคโนโลยีเทคโนโลยีเทคโนโลยีเทคโนโลยีเทคโนโลยีเทคโนโลยีเทคโนโลยีเทคโนโลยีเทคโนโลยี </p> <p> ชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิตชีวิต ใช้งานได้ผลงาน </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> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 type = "text/javascript" src = "tabs.js"> </script> <script type = "text/javascript"> window.onload = function () {แท็บ ('แท็บ', 'คลิก'); แท็บ ('แท็บ 2', 'mouseover');tabs.js
แท็บฟังก์ชั่น (ID, Trigger) {var tabsbtn = document.getElementById (id) .getElementByTagname ('H2') [0] .getElementByTagname ('a'); var tabscontent = document.getElementIid (id) i ++) {tabsbtn [i] .index = i; if (trigger == 'คลิก') {tabsbtn [i] .onclick = function () {clearclass (); this.className = 'on'; showcontent (this.index);}} อื่นถ้า (trigger == 'mouseover') {tabsbtn [i] .onmouseover = function () {clearclass (); this.className = 'on'; showcontent (this.index);}}} ฟังก์ชั่น showcontent (n) {สำหรับ (var i = 0, len = tabsbtn.length; i <len; i ++) {tabscontent [i] clearclass () {สำหรับ (var i = 0, len = tabsbtn.length; i <len; i ++) {tabsbtn [i] .classname = '';}}}base.css
@Charset "utf-8";/*@ name: base@ function: รีเซ็ตเบราว์เซอร์สไตล์เริ่มต้น*//*ป้องกันผลกระทบของสีพื้นหลังที่ผู้ใช้กำหนดไว้บนหน้าเว็บเพิ่มเพื่ออนุญาตให้ผู้ใช้ปรับแต่งแบบอักษร*/html {สี: สีดำ; */body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, รหัส, รูปแบบ, ชุดฟิลด์, ตำนาน, อินพุต, textarea, p, blockquote, td, td, hr, ปุ่ม, บทความ, โปรดทราบว่าองค์ประกอบของรูปแบบไม่ได้สืบทอดตัวอักษรหลัก*/ตัว, ปุ่ม, อินพุต, เลือก, textarea {font: 12px simsun, tahoma, arial, sans-serif;}, select, textarea {font-size: 100%;}/* ลบขอบของแต่ละตาราง th ไม่ได้สืบทอดการจัดตำแหน่งข้อความ*/th {text-allign: ermerit;}/* ลบเส้นขอบเริ่มต้น*/fieldset, img {border: none;}/* ie6 7 8 (q) แสดงข้อผิดพลาดเป็นตัวแทนในบรรทัด*/iframe {display: block;}/* ลบ Firefox สไตล์*/del {การกำหนดข้อความ: line-through;} ที่อยู่, คำบรรยาย, อ้างอิง, รหัส, dfn, em, th, var {รูปแบบตัวอักษร: ปกติ; Font-weight: 500;}/*ลบตัวระบุก่อนรายการที่สำคัญที่สุด {text-align: left;}/* จาก yahoo ให้ชื่อถูกปรับแต่ง, ปรับให้เข้ากับแอปพลิเคชันหลายระบบ*/h1, h2, h3, h4, h5, h6 {ตัวอักษรขนาด: 100%; แบบอักษร-น้ำหนัก: 500;} {font-size: 75%; leight line: 0; ตำแหน่ง: สัมพัทธ์; แนวตั้ง-จัดตำแหน่ง: baseline;} sup {top: -0.5em;} sub {ด้านล่าง: -0.25em;}/* ปล่อยให้ลิงก์แสดงอยู่ใต้ไม่ได้ {การกำหนดข้อความ: ไม่มี;}/*ie6,7 การถอดจุดโฟกัสบรรทัด*/a: โฟกัส,*: โฟกัส {โครงร่าง: ไม่มี;}/*เคลียร์ลอย*/. Clearfix: ก่อนหน้า. clearfix: หลังจาก {เนื้อหา: ""; table: table;}. clearfix: /* สำหรับ IE6 IE7*/}. Clear {Clear: ทั้งสอง; Display: Block; Overflow: Hidden; ความสูง: 0; Line-Height: 0; Font-Size: 0;}/* Set Display and Hide มักจะใช้ร่วมกับ JS*/. ซ่อน {แสดง: ไม่มีสิ่งสำคัญ! {float: ซ้าย; แสดง: inline;}. fr {float: ขวา; display: inline;}ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น