รหัสค่อนข้างกระชับและเข้าใจง่ายดังนั้นจึงไม่มีเรื่องไร้สาระอีกต่อไป
แสดงรหัสโดยตรง:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html" charset = "utf-8">
<tite> JS Simple Tab </title>
<script type = "text/javascript" src = "js/demo.js"> </script>
<style type = "text/css">
*{Font-Size: 14px; margin: 0px;}
A {color:#a0b3d6; การตกแต่งข้อความ: ไม่มี;}
.tabs {เส้นขอบ: 1px solid #a0b3d6; margin: 100px; width: 350px;}
.tabs-nav a {พื้นหลัง:#eaf0fd; Line-Height: 30px; padding: 0px 20px 0px 20px; แสดง: inline-block; border-right: 1px solid #a0b3d6; ขอบด้านล่าง: 1px solid #a0b3d6; ลอย: ซ้าย;}
.TABS-NAV .ON {พื้นหลัง: สีขาว; ขอบด้านล่าง: 1px Solid White; ตำแหน่ง: ญาติ;}
.tabs-Content {display: block; Padding: 20px; Border-Top: 1px Solid #A0B3D6; ขอบด้านบน: -1px;}
.tabs-content_hide {display: none;}
</style>
</head>
<body>
<div id = "แท็บ">
<H2>
<a href = "JavaScript:;"> บ้าน </a>
<a href = "JavaScript:;"> เทคโนโลยี </a>
<a href = "JavaScript:;"> ชีวิต </a>
<a href = "JavaScript:;"> Works </a>
</h2>
<div style = "ชัดเจน: ทั้งสอง;"> </div>
<p> home </p>
<p> เทคโนโลยี </p>
<p> ชีวิต </p>
<p> ทำงาน </p>
</div>
</body>
<footer> </ooter>
</html>
-
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
แท็บ ("แท็บ", "MouseOver");
-
แท็บฟังก์ชัน (ID, Trigger) {
var tabbtn = document.getElementById (id) .getElementsByTagname ("H2") [0] .getElementsByTagname ("A");
var tabscontent = document.getElementById (id) .getElementsByTagname ("P");
สำหรับ (var i = 0; i <tabbtn.length; i ++) {
tabbtn [i] .index = i;
if (trigger == 'mouseover') {
tabbtn [i] .onmouseover = function () {
Clearclass ();
this.className = "on";
showcontent (this.index);
-
-
ฟังก์ชั่น showcontent (n) {
สำหรับ (var i = 0; i <tabscontent.length; i ++) {
tabscontent [i] .index = i;
tabscontent [i] .className = "tabs-content_hide";
-
tabscontent [n] .className = "แท็บ-เนื้อหา";
-
ฟังก์ชั่น clearclass () {
สำหรับ (var i = 0; i <tabbtn.length; i ++) {
tabbtn [i] .className = "";
-
-
-
-
มันง่ายมากที่จะบรรลุเอฟเฟกต์การสลับของแท็บหรือไม่? เพื่อนสามารถใช้มันในโครงการของตัวเองหลังจากสวยงาม