คู่มือนี้จะอธิบายวิธีสร้างแท็บด้วย CSS และ JavaScript
จะสร้างแท็บด้วย CSS และ JavaScript ได้อย่างไร
ส่วนนี้ดำเนินการคำแนะนำทีละขั้นตอนสำหรับการสร้างแท็บด้วย CSS และ JavaScript
ขั้นตอนที่ 1: สร้างโครงสร้างแท็บโดยใช้ HTML
ขั้นแรก ดูโค้ด HTML ที่สร้างโครงสร้างแท็บ HTML:
< รหัสดิวิชั่น = 'แท็บ1' เมื่อคลิก = 'อันดับแรก()' > บ้าน กอง >
< รหัสดิวิชั่น = 'แท็บ2' เมื่อคลิก = 'ที่สอง();' > เกี่ยวกับ กอง >
< รหัสดิวิชั่น = 'แท็บ 3' เมื่อคลิก = 'ที่สาม();' > ติดต่อเรา กอง >
< พี่ชาย />
< รหัสดิวิชั่น = 'ต่อ1' > ยินดีต้อนรับสู่ Linuxhint ! กอง >
< รหัสดิวิชั่น = 'ต่อ2' > การศึกษาเทคโนโลยี
เราได้สร้างผลิตภัณฑ์มากมายเพื่อช่วยให้คุณเรียนรู้เกี่ยวกับ Linux, การเขียนโปรแกรม, วิทยาการคอมพิวเตอร์ และอื่นๆ อีกมากมาย
กอง >
< รหัสดิวิชั่น = 'ต่อ3' >
คุณสามารถติดต่อทีมงานของเราได้ที่บรรณาธิการ AT linuxhint DOT com
กอง >
ในบรรทัดโค้ดด้านบน:
- “ ” แท็กเพิ่มองค์ประกอบ div ด้วยรหัส “tab1” และแนบมาด้วย “ เมื่อคลิก ” เหตุการณ์เพื่อดำเนินการเชื่อมโยง “ อันดับแรก() ” ฟังก์ชั่นเมื่อมีการคลิก องค์ประกอบนี้ทำหน้าที่เป็นแท็บ HTML
- วิธีการข้างต้นดำเนินการกับองค์ประกอบ div สองรายการถัดไป
- “
แท็ก ” เพิ่มการขึ้นบรรทัดใหม่- “
” แท็กอีกครั้งแทรกองค์ประกอบ div ที่มีรหัสที่กำหนด “cont1” องค์ประกอบนี้แสดงเนื้อหาของแท็บที่สร้างขึ้นในบล็อก- สองต่อไป”
แท็ก ” ยังเพิ่มองค์ประกอบ div ด้วยรหัสที่กำหนด
ขั้นตอนที่ 2: แท็บสไตล์โดยใช้ CSSตอนนี้ ใช้คุณสมบัติการกำหนดสไตล์ CSS เพื่อปรับแต่งแท็บและเนื้อหาตามที่คุณต้องการ:
< สไตล์ >
#tab1, #tab2, #tab3 {
ลอย : : ซ้าย ;
การขยายความ : : 5px 10px 5px 10px ;
พื้นหลัง : : สีส้มแดง ;
สี : : #FFFFFF ;
ระยะขอบ : : 0px 5px 0px 5px ;
เคอร์เซอร์ : : ตัวชี้ ;
ชายแดน - - รัศมี : : 3px ;
}
#แท็บ1 : : โฮเวอร์, #tab2 : : โฮเวอร์, #tab3 : : โฮเวอร์ {
พื้นหลัง : : สีเขียว ;
}
#cont1, #cont2, #cont3 {
ความกว้าง : : 300px ;
ความสูง : : 100px ;
การขยายความ : : 40px ;
แบบอักษร - - ขนาด : : ปานกลาง ;
แบบอักษร - - ตระกูล : : 'ไทม์นิวโรมัน' , ไทม์ส, เซิฟ ;
ชายแดน : : 2px สีส้มแดงทึบ ;
ชายแดน - - รัศมี : : 7px ;
แสดง : : ไม่มี ;
}
สไตล์ >ในข้อมูลโค้ดที่ระบุ:
- ประการแรก เข้าไปที่ “ แท็บ ” โดยใช้รหัสที่ได้รับมอบหมายและปรับแต่งผ่านคุณสมบัติสไตล์ต่อไปนี้ (ลอย ช่องว่างภายใน พื้นหลัง สี ระยะขอบ: 0px 5px 0px 5px เคอร์เซอร์ และรัศมีเส้นขอบ)
- จากนั้นแนบ “ โฮเวอร์ ” ตัวจัดการเหตุการณ์พร้อมแท็บเพื่อเปลี่ยนสีพื้นหลังเมื่อผู้ใช้เลื่อนเมาส์ไปเหนือแท็บ
- หลังจากนั้นให้เข้าไปที่ “ เนื้อหาแท็บ ” เก็บไว้ในองค์ประกอบ div ซึ่งมีรหัสเป็น “cont1”, “cont2” และ “cont3” ตอนนี้ ใช้คุณสมบัติสไตล์ต่อไปนี้ (ความกว้าง ความสูง ระยะห่างจากขอบ ขนาดตัวอักษร ตระกูลแบบอักษร เส้นขอบ รัศมีเส้นขอบ และการแสดงผล) กับคุณสมบัติเหล่านั้น
ขั้นตอนที่ 3: เพิ่มฟังก์ชันการทำงานให้กับแท็บโดยใช้ JavaScriptสุดท้าย เพิ่มฟังก์ชันการทำงานให้กับแท็บที่สร้างขึ้นด้วยความช่วยเหลือของ JavaScript:
< สคริปต์ >
ทำงานก่อน ( ) {
เอกสาร. รับ ElementById ( 'ต่อ1' ) . สไตล์ . แสดง = 'ปิดกั้น' ;
เอกสาร. รับ ElementById ( 'ต่อ2' ) . สไตล์ . แสดง = 'ไม่มี' ;
เอกสาร. รับ ElementById ( 'ต่อ3' ) . สไตล์ . แสดง = 'ไม่มี' ;
}
ฟังก์ชั่นที่สอง ( ) {
เอกสาร. รับ ElementById ( 'ต่อ2' ) . สไตล์ . แสดง = 'ปิดกั้น' ;
เอกสาร. รับ ElementById ( 'ต่อ1' ) . สไตล์ . แสดง = 'ไม่มี' ;
เอกสาร. รับ ElementById ( 'ต่อ3' ) . สไตล์ . แสดง = 'ไม่มี' ;
}
ฟังก์ชั่นที่สาม ( ) {
เอกสาร. รับ ElementById ( 'ต่อ3' ) . สไตล์ . แสดง = 'ปิดกั้น' ;
เอกสาร. รับ ElementById ( 'ต่อ1' ) . สไตล์ . แสดง = 'ไม่มี' ;
เอกสาร. รับ ElementById ( 'ต่อ2' ) . สไตล์ . แสดง = 'ไม่มี'
}
สคริปต์ >บรรทัดโค้ดด้านบน:
- กำหนดฟังก์ชันชื่อ “ อันดับแรก '.
- ในคำจำกัดความของฟังก์ชันนี้ “ document.getElementById() ” วิธีการเข้าถึงองค์ประกอบ div ที่มีรหัสเป็น “cont1” และใช้ “ สไตล์ ” ทรัพย์สินที่มี “ ปิดกั้น ” คุณค่ากับมัน คุณสมบัตินี้จะแสดงเนื้อหาของแท็บที่ผู้ใช้คลิก
- จากนั้น “document.getElementById()” จะเข้าถึง div อื่น และใช้คุณสมบัติ “style” ที่มีค่า “none” เพื่อซ่อน มันจะซ่อนองค์ประกอบนั้นบนหน้าเว็บ
- วิธีการข้างต้นดำเนินการสำหรับองค์ประกอบ div ที่เข้าถึงถัดไป เนื่องจากฟังก์ชัน 'แรก' จะแสดงเฉพาะเนื้อหาของแท็บที่มีค่าคุณสมบัติ 'สไตล์' เป็น 'บล็อก' และซ่อนรายการอื่นๆ
- ขั้นตอนข้างต้นดำเนินการสำหรับฟังก์ชัน “second()” และ “third()” ถัดไป
เอาท์พุต
จะเห็นได้ว่าแท็บถูกสร้างขึ้นสำเร็จแล้วและแสดงเนื้อหาตามลำดับเมื่อผู้ใช้คลิก
บทสรุป
หากต้องการสร้างแท็บ ขั้นแรกให้สร้างโครงสร้างโดยใช้ 'HTML' จากนั้นปรับแต่งโดยใช้คุณสมบัติการจัดรูปแบบ CSS คุณสมบัติการจัดสไตล์จะถูกเพิ่มโดยไม่ต้องส่งออกสไตล์ชีตเพิ่มเติมใดๆ คุณสมบัติเหล่านี้ทำให้แท็บดูน่าดึงดูดและสะดุดตา เมื่อสร้างและปรับแต่งแท็บแล้ว ให้ใช้ภาษาการเขียนโปรแกรม JavaScript เพื่อเพิ่มฟังก์ชันการทำงานให้กับแท็บเหล่านั้น คู่มือนี้ได้อธิบายขั้นตอนการสร้างแท็บด้วย CSS และ JavaScript ในทางปฏิบัติแล้ว