Bagaimana cara memilih tab di javascript?

Question

Cristian adalah pengembang frontend dari Kolombia. Dia senang menulis tentang apa yang dia pelajari dan memfokuskan kariernya untuk membantu membuat konten web lebih mudah diakses oleh semua orang. Bidang keahlian utamanya adalah HTML, CSS, dan aksesibilitas web

Peran ARIA tab menunjukkan elemen interaktif di dalam tablist yang, saat diaktifkan, menampilkan tabpanel terkait

Table of Contents Show

Bagaimana cara memilih tab?
Bagaimana Anda memberi tab di JavaScript?
Bagaimana cara menampilkan tab di JavaScript?
Apa gunanya \t dalam JavaScript?

<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">
  Tab label
</button>

Elemen dengan peran tab mengontrol visibilitas elemen terkait dengan peran tabpanel. Pola pengalaman pengguna yang umum adalah sekelompok tab visual di atas, atau di samping, area konten, dan memilih tab yang berbeda akan mengubah konten dan membuat tab yang dipilih lebih menonjol daripada tab lainnya

Elemen dengan peran tab harus anak dari elemen dengan peran tablist, atau memiliki

<div role="tab"><h3>Title of my tab</h3></div>

4 sebagai bagian dari

<div role="tab"><h3>Title of my tab</h3></div>

5 milik tablist. Kombinasi ini mengidentifikasi teknologi pendukung bahwa elemen tersebut adalah bagian dari sekelompok elemen terkait. Beberapa teknologi bantuan akan menghitung jumlah tab elemen peran di dalam tablist, dan memberi tahu pengguna yang tab saat ini telah mereka targetkan. Selanjutnya, elemen dengan peran tab harus berisi properti

<div role="tab"><h3 role="presentation">Title of my tab</h3></div>

1 yang mengidentifikasi properti tabpanel yang sesuai (yang memiliki peran tabpanel) oleh elemen

<div role="tab"><h3>Title of my tab</h3></div>

4. Saat elemen dengan peran tabpanel memiliki fokus, atau turunannya memiliki fokus, itu menunjukkan bahwa elemen yang terhubung dengan peran tab adalah tab aktif di tablist

Ketika elemen dengan peran tab dipilih atau aktif, atribut

<div role="tab"><h3 role="presentation">Title of my tab</h3></div>

9 harus disetel ke

<div role="tab">Title of my tab</div>

0. Jika tidak, atribut

<div role="tab"><h3 role="presentation">Title of my tab</h3></div>

_9 mereka harus disetel ke

<div role="tab">Title of my tab</div>

2. Ketika tablist yang dapat dipilih tunggal dipilih atau aktif, atribut

<div role="tab">Title of my tab</div>

4 dari panel tab lainnya harus disetel ke true hingga pengguna memilih tab yang terkait dengan panel tab itu. Ketika tablist multi-pilihan dipilih atau aktif, tabpanel yang sesuai harus memiliki atribut

<div role="tab">Title of my tab</div>

7 yang disetel ke

<div role="tab">Title of my tab</div>

0 dan atribut

<div role="tab">Title of my tab</div>

4 disetel ke

<div role="tab">Title of my tab</div>

2, jika tidak sebaliknya

Ada beberapa jenis komponen antarmuka pengguna yang, jika direpresentasikan dalam API aksesibilitas platform, hanya dapat berisi teks. API Aksesibilitas tidak memiliki cara untuk merepresentasikan elemen semantik yang terkandung dalam tab. Untuk mengatasi batasan ini, browser, secara otomatis menerapkan peran

<div class="tabs">
  <div role="tablist" aria-label="Sample Tabs">
    <button
      role="tab"
      aria-selected="true"
      aria-controls="panel-1"
      id="tab-1"
      tabindex="0">
      First Tab
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1">
      Second Tab
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="panel-3"
      id="tab-3"
      tabindex="-1">
      Third Tab
    </button>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Content for the first panel</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Content for the second panel</p>
  </div>
  <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
    <p>Content for the third panel</p>
  </div>
</div>

2 ke semua elemen turunan dari elemen tab karena merupakan peran yang tidak mendukung turunan semantik

Misalnya, pertimbangkan elemen tab berikut, yang berisi heading

<div role="tab"><h3>Title of my tab</h3></div>

_

Karena turunan dari tab bersifat presentasional, kode berikut setara

<div role="tab"><h3 role="presentation">Title of my tab</h3></div>

Dari sudut pandang pengguna teknologi asistif, tajuk tidak ada karena cuplikan kode sebelumnya setara dengan yang berikut di pohon aksesibilitas

<div role="tab">Title of my tab</div>

_

<div role="tab"><h3 role="presentation">Title of my tab</h3></div>

_9

boolean

<div role="tab"><h3 role="presentation">Title of my tab</h3></div>

1

<div role="tab"><h3>Title of my tab</h3></div>

_4 elemen dengan tabpanel peran

isi

KeyActionTabSaat fokus berada di luar tablist memindahkan fokus ke tab aktif. Jika fokus berada pada tab aktif, pindahkan fokus ke elemen berikutnya dalam urutan fokus keyboard, idealnya tab aktif terkait tabpanel. →Fokus dan secara opsional aktifkan tab berikutnya dalam daftar tab. Jika tab saat ini adalah tab terakhir dalam daftar tab, ini akan mengaktifkan tab pertama. ←Fokus dan secara opsional mengaktifkan tab sebelumnya dalam daftar tab. Jika tab saat ini adalah tab pertama dalam daftar tab, ini akan mengaktifkan tab terakhir. HapusKetika diizinkan menghapus tab yang dipilih saat ini dari daftar tab

Catatan. Meskipun ada cara untuk membuat fungsionalitas seperti tab tanpa JavaScript, tidak ada kombinasi pengganti yang hanya menggunakan HTML dan CSS yang akan menyediakan rangkaian fungsionalitas yang sama seperti yang diperlukan di atas untuk tab yang dapat diakses dengan konten

Contoh ini menggabungkan peran tab dengan tablist dan elemen dengan tabpanel untuk membuat grup interaktif konten bertab. Di sini kami menyertakan grup konten kami dalam

.tabs {
  padding: 1em;
}

[role="tablist"] {
  margin-bottom: -1px;
}

[role="tab"] {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 5px 5px 0 0;
  border: 1px solid grey;
  border-bottom: 0;
  padding: 0.2em;
}

[role="tab"][aria-selected="true"] {
  z-index: 3;
}

[role="tabpanel"] {
  position: relative;
  padding: 0 0.5em 0.5em 0.7em;
  border: 1px solid grey;
  border-radius: 0 0 5px 5px;
  background: white;
  z-index: 2;
}

[role="tabpanel"]:focus {
  border-color: orange;
  outline: 1px solid orange;
}

6, dengan tablist kami memiliki

.tabs {
  padding: 1em;
}

[role="tablist"] {
  margin-bottom: -1px;
}

[role="tab"] {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 5px 5px 0 0;
  border: 1px solid grey;
  border-bottom: 0;
  padding: 0.2em;
}

[role="tab"][aria-selected="true"] {
  z-index: 3;
}

[role="tabpanel"] {
  position: relative;
  padding: 0 0.5em 0.5em 0.7em;
  border: 1px solid grey;
  border-radius: 0 0 5px 5px;
  background: white;
  z-index: 2;
}

[role="tabpanel"]:focus {
  border-color: orange;
  outline: 1px solid orange;
}

8 yang melabelinya untuk teknologi bantuan. Setiap tab adalah

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

0 dengan atribut yang disebutkan sebelumnya. tab pertama memiliki

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

2 dan

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

3 diterapkan. Kedua atribut ini harus selalu dikoordinasikan seperti itu—sehingga ketika tab lain dipilih, maka

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

2 dan

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

3 akan diterapkan. Semua tab yang tidak dipilih harus memiliki

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

6 dan

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

7

Semua elemen tabpanel memiliki

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

2 untuk membuatnya menjadi tab, dan semua kecuali elemen yang sedang aktif memiliki atribut

<div role="tab">Title of my tab</div>

4. Atribut

<div role="tab">Title of my tab</div>

4 akan dihapus saat tabpanel menjadi terlihat dengan JavaScript. Ada beberapa gaya dasar yang diterapkan yang mengubah gaya tombol dan mengubah tab3 dari tab elemen untuk memberikan ilusi bahwa itu terhubung ke tabpanel untuk elemen aktif, dan ilusi bahwa elemen tidak aktif berada di belakang tabpanel aktif

<div class="tabs">
  <div role="tablist" aria-label="Sample Tabs">
    <button
      role="tab"
      aria-selected="true"
      aria-controls="panel-1"
      id="tab-1"
      tabindex="0">
      First Tab
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1">
      Second Tab
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="panel-3"
      id="tab-3"
      tabindex="-1">
      Third Tab
    </button>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Content for the first panel</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Content for the second panel</p>
  </div>
  <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
    <p>Content for the third panel</p>
  </div>
</div>

.tabs {
  padding: 1em;
}

[role="tablist"] {
  margin-bottom: -1px;
}

[role="tab"] {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 5px 5px 0 0;
  border: 1px solid grey;
  border-bottom: 0;
  padding: 0.2em;
}

[role="tab"][aria-selected="true"] {
  z-index: 3;
}

[role="tabpanel"] {
  position: relative;
  padding: 0 0.5em 0.5em 0.7em;
  border: 1px solid grey;
  border-radius: 0 0 5px 5px;
  background: white;
  z-index: 2;
}

[role="tabpanel"]:focus {
  border-color: orange;
  outline: 1px solid orange;
}

Ada dua hal yang perlu kita lakukan dengan JavaScript. kita perlu mengubah fokus dan indeks tab elemen tab kita dengan panah kanan dan kiri, dan kita perlu mengubah tab dan tabpanel aktif ketika kita mengklik tab

Untuk menyelesaikan yang pertama, kami mendengarkan acara tablist1 di tablist. Jika peristiwa tablist_3 adalah tablist4 atau tablist5, kita bereaksi terhadap peristiwa tersebut. Kita mulai dengan mengatur tablist_6 dari elemen tab saat ini ke -1, membuatnya tidak lagi dapat ditabulasi. Kemudian, jika panah kanan ditekan, kami menambah penghitung fokus tab kami satu per satu. Jika penghitung lebih besar dari jumlah tab elemen yang kita miliki, kita memutar kembali ke tab pertama dengan menyetel penghitung itu ke 0. Jika panah kiri ditekan, kami mengurangi penghitung fokus tab kami satu per satu, dan jika kurang dari 0, kami menetapkannya ke jumlah tab elemen dikurangi satu (untuk sampai ke elemen terakhir). Terakhir, kita menyetel tabpanel0 ke elemen tab yang indeksnya sama dengan penghitung fokus tab, dan menyetel tablist6 ke 0 untuk membuatnya menjadi tab

Untuk menangani perubahan tab dan tabpanel aktif, kami memiliki fungsi yang mengambil acara, mendapatkan elemen yang memicu acara, elemen induk elemen pemicu, dan elemen grandparent-nya. Kami kemudian menemukan semua tab dengan

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

_3 di dalam elemen induk dan menyetelnya ke

<div role="tab">Title of my tab</div>

2, lalu menyetel

<div role="tab"><h3 role="presentation">Title of my tab</h3></div>

9 elemen pemicu menjadi

<div role="tab">Title of my tab</div>

0. Setelah itu, kami menemukan semua elemen tabpanel dalam elemen kakek, membuat semuanya

<div role="tab">Title of my tab</div>

4, dan akhirnya memilih elemen yang

<div role="tab"><h3>Title of my tab</h3></div>

4 sama dengan pemicu tab

<div role="tab"><h3 role="presentation">Title of my tab</h3></div>

1 dan menghapus atribut

<div role="tab">Title of my tab</div>

4, membuatnya terlihat

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

Direkomendasikan untuk menggunakan elemen

<div role="tab"><h3>Title of my tab</h3></div>

_05 dengan peran tab untuk fitur fungsional dan yang dapat diakses bawaannya, bukan menambahkannya sendiri. Untuk mengontrol fungsionalitas kunci tab untuk elemen dengan peran tab, disarankan untuk menyetel semua elemen non-aktif ke

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

7, dan menyetel elemen aktif ke

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // Add a click event handler to each tab
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // Enable arrow navigation between tabs in the tab list
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // Move right
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.key === 'ArrowRight') {
        tabFocus++;
        // If we're at the end, go to the start
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // Move left
      } else if (e.key === 'ArrowLeft') {
        tabFocus--;
        // If we're at the start, move to the end
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // Remove all current selected tabs
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // Set this tab as selected
  target.setAttribute("aria-selected", true);

  // Hide all tab panels
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // Show the selected panel
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

2

Apa properti terkait, dan dalam urutan apa atribut atau properti ini akan dibaca, properti mana yang akan didahulukan dari properti ini, dan properti mana yang akan ditimpa

Bagaimana cara memilih tab?

Klik tab untuk sheet pertama, lalu tahan CTRL sambil mengklik tab sheet lain yang ingin dipilih . Dengan keyboard. Pertama, tekan F6 untuk mengaktifkan tab sheet. Selanjutnya, gunakan tombol panah kiri atau kanan untuk memilih lembar yang Anda inginkan, lalu Anda dapat menggunakan Ctrl+Spasi untuk memilih lembar tersebut.

Bagaimana Anda memberi tab di JavaScript?

Karakter tab dapat disisipkan dengan menahan Alt dan menekan 0 dan 9 bersamaan .

Bagaimana cara menampilkan tab di JavaScript?

Framework7 memudahkan Anda untuk beralih atau menampilkan tab menggunakan metode JavaScript berikut. Sintaksis. Aplikasi saya. showTab(tab)

Apa gunanya \t dalam JavaScript?

Metakarakter RegExp \t dalam JavaScript digunakan untuk menemukan karakter tab . Jika ditemukan, ia mengembalikan posisi selain itu ia mengembalikan -1. Contoh 1. Contoh ini mencari karakter tab dalam string.

kode javascript