แท็บใน JavaScript

ตอนนี้เราจะนำแท็บมาใช้ ลองดูตัวอย่างสิ่งที่คุณต้องทำทันที:

ศึกษาโครงสร้างที่เราจะใช้แก้ปัญหาด้วย:

<div id="parent">
	<div class="menu">
		<a href="" class="active">แท็บ 1</a>
		<a href="">แท็บ 2</a>
		<a href="">แท็บ 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			ข้อความในแท็บ 1
		</div>
		<div class="tab">
			ข้อความในแท็บ 2
		</div>
		<div class="tab">
			ข้อความในแท็บ 3
		</div>
	</div>
</div>

#parent {
	margin: 0 auto;
	width: 400px;
}

.menu a {
	margin-right: 5px;
	display: inline-block;
	padding: 10px;
	color: black;
	text-decoration: none;
	border: 1px solid gray;
}
.menu a:hover {
	background: #f8f8f8;
}
.menu a.active {
	border-color: transparent;
	background: #f2f2f2;
}

.tabs .tab:not(.active) {
	display: none;
}
.tabs .tab {
	padding: 10px;
	background: #f2f2f2;
	height: 300px;
}

สังเกตว่าลิงก์ที่ใช้งานอยู่และแท็บที่ใช้งานอยู่มีคลาส active

การอภิปราย

ตอนนี้มาพูดคุยเกี่ยวกับวิธีการแก้ไขปัญหานี้ เห็นได้ชัดว่าจำเป็นต้องเชื่อมโยงลิงก์กับแท็บที่เกี่ยวข้อง ในบทเรียนนี้ จากหนังสือเรียนเชิงทฤษฎี เราได้วิเคราะห์ตัวเลือกที่เป็นไปแล้ว

ในกรณีนี้ ฉันขอเสนอให้เชื่อมโยงลิงก์และแท็บตามตำแหน่ง: ลิงก์แรกจะเปิดแท็บแรก ลิงก์ที่สองจะเปิดแท็บที่สอง และต่อๆ ไป

อัลกอริธึมทั่วไปจะมีลักษณะดังนี้: เมื่อคลิกที่ปุ่ม เราต้องหาลิงก์ที่มีคลาสนั้นและลบคลาสนั้นออก ในทำนองเดียวกัน เราต้องหาแท็บที่มีคลาสนี้และลบคลาสนี้ออกด้วย

จากนั้น เราต้องนำลิงก์ที่ถูกคลิกและเปิดใช้งาน จากนั้นเราต้องหาแท็บที่มีหมายเลขเดียวกันกับลิงก์ของเรา - และเปิดใช้งานมันด้วย

คัดลอกโค้ด HTML และ CSS ที่ให้มา นำแท็บมาใช้ตามอัลกอริธึมที่อธิบายไว้