แท็บใน JavaScript

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

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

html<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>

css#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

การอภิปราย

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

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

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

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