Tambahkan kelas ke daftar item javascript

Question

Grup daftar paling dasar adalah daftar tidak berurutan dengan item daftar dan kelas yang tepat. Bangun di atasnya dengan opsi yang mengikuti, atau dengan CSS Anda sendiri sesuai kebutuhan

Table of Contents Show

Item yang dinonaktifkan
Tautan dan tombol
Kelas kontekstual
Dengan lencana
Konten khusus
Kotak centang dan radio
Kelancangan
Perilaku JavaScript
Menggunakan atribut data
Melalui JavaScript
efek memudar
Bagaimana cara menambahkan kelas ke elemen Li?
Bagaimana cara menambahkan kelas ke elemen dalam JavaScript secara dinamis?
Bagaimana cara menambahkan kelas ke banyak elemen dalam JavaScript?

Sebuah benda
Item kedua
Item ketiga
Item keempat
Dan yang kelima


  An item
  A second item
  A third item
  A fourth item
  And a fifth one

Item aktif

Tambahkan


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

_8 ke


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

9 untuk menunjukkan pilihan aktif saat ini

Item aktif
Item kedua
Item ketiga
Item keempat
Dan yang kelima


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

Item yang dinonaktifkan

Tambahkan


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

0 ke


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

9 untuk membuatnya tampak dinonaktifkan. Perhatikan bahwa beberapa elemen dengan


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

0 juga akan memerlukan JavaScript khusus untuk sepenuhnya menonaktifkan peristiwa kliknya (mis. g. , tautan)

Item yang dinonaktifkan
Item kedua
Item ketiga
Item keempat
Dan yang kelima


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

_

Tautan dan tombol

Gunakan


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

_3s atau s untuk membuat item grup daftar yang dapat ditindaklanjuti dengan status hover, nonaktif, dan aktif dengan menambahkan


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

4. Kami memisahkan kelas semu ini untuk memastikan grup daftar terbuat dari elemen non-interaktif (seperti

atau

s) jangan berikan biaya klik atau tap

Pastikan untuk tidak menggunakan kelas


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

5 standar di sini


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

_

Dengan

s, Anda juga dapat menggunakan atribut


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

_6 alih-alih kelas


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

0. Sayangnya,


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

_3 tidak mendukung atribut yang dinonaktifkan

Tombol saat ini Item kedua Item tombol ketiga Item tombol keempat Item tombol yang dinonaktifkan


  
    The current button
  
  A second item
  A third button item
  A fourth button item
  A disabled button item

Menyiram

Tambahkan


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

_9 untuk menghapus beberapa batas dan sudut membulat untuk merender item grup daftar tepi-ke-tepi dalam wadah induk (e. g. , kartu-kartu)

Sebuah benda
Item kedua
Item ketiga
Item keempat
Dan yang kelima


  An item
  A second item
  A third item
  A fourth item
  And a fifth one

Bernomor

Tambahkan kelas pengubah


  
    The current button
  
  A second item
  A third button item
  A fourth button item
  A disabled button item

_0 (dan secara opsional gunakan an

Nomor dihasilkan oleh


  
    The current button
  
  A second item
  A third button item
  A fourth button item
  A disabled button item


  
    The current button
  
  A second item
  A third button item
  A fourth button item
  A disabled button item

dengan


  
    The current button
  
  A second item
  A third button item
  A fourth button item
  A disabled button item

3 dan


  
    The current button
  
  A second item
  A third button item
  A fourth button item
  A disabled button item

4

Cras justo odio
Cras justo odio
Cras justo odio


  Cras justo odio
  Cras justo odio
  Cras justo odio

Ini bekerja sangat baik dengan konten khusus juga


  
    
      
Subheading
      Cras justo odio
    
    14
  
  
    
      
Subheading
      Cras justo odio
    
    14
  
  
    
      
Subheading
      Cras justo odio
    
    14

Horisontal

Tambahkan


  
    The current button
  
  A second item
  A third button item
  A fourth button item
  A disabled button item

_5 untuk mengubah tata letak item grup daftar dari vertikal ke horizontal di semua breakpoint. Alternatifnya, pilih varian responsif


  
    The current button
  
  A second item
  A third button item
  A fourth button item
  A disabled button item

_6 untuk membuat grup daftar horizontal mulai dari breakpoint


  
    The current button
  
  A second item
  A third button item
  A fourth button item
  A disabled button item

7. Saat ini grup daftar horizontal tidak dapat digabungkan dengan grup daftar flush

ProTip. Ingin item grup daftar dengan lebar yang sama saat horizontal?

Sebuah benda
Item kedua
Item ketiga

Sebuah benda
Item kedua
Item ketiga

Sebuah benda
Item kedua
Item ketiga

Sebuah benda
Item kedua
Item ketiga

Sebuah benda
Item kedua
Item ketiga

Sebuah benda
Item kedua
Item ketiga


  An item
  A second item
  A third item


  An item
  A second item
  A third item


  An item
  A second item
  A third item


  An item
  A second item
  A third item


  An item
  A second item
  A third item


  An item
  A second item
  A third item

Kelas kontekstual

Gunakan kelas kontekstual untuk memberi gaya item daftar dengan latar belakang dan warna stateful

Item grup daftar default sederhana
Item grup daftar primer sederhana
Item grup daftar sekunder sederhana
Item grup daftar sukses sederhana
Item grup daftar bahaya sederhana
Item grup daftar peringatan sederhana
Item grup daftar info sederhana
Item grup daftar cahaya sederhana
Item grup daftar gelap sederhana


  A simple default list group item

  A simple primary list group item
  A simple secondary list group item
  A simple success list group item
  A simple danger list group item
  A simple warning list group item
  A simple info list group item
  A simple light list group item
  A simple dark list group item

Kelas kontekstual juga berfungsi dengan


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

4. Perhatikan penambahan gaya melayang di sini yang tidak ada di contoh sebelumnya. Juga didukung adalah status


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

_8;


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

0

Menyampaikan makna pada teknologi bantu

Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi pendukung – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna terlihat jelas dari konten itu sendiri (mis. g. teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan kelas


  An item
  A second item
  A third item
  A fourth item
  And a fifth one

1

Dengan lencana

Tambahkan lencana ke item grup daftar apa pun untuk menampilkan jumlah yang belum dibaca, aktivitas, dan lainnya dengan bantuan beberapa utilitas

Item daftar 14
Item daftar kedua 2
Item daftar ketiga 1


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

1

Konten khusus

Tambahkan hampir semua HTML di dalamnya, bahkan untuk grup daftar tertaut seperti di bawah ini, dengan bantuan utilitas flexbox


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

2

Kotak centang dan radio

Tempatkan kotak centang dan radio Bootstrap di dalam item grup daftar dan sesuaikan sesuai kebutuhan. Anda dapat menggunakannya tanpa


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

3, tetapi harap ingat untuk menyertakan atribut dan nilai


  An item
  A second item
  A third item
  A fourth item
  And a fifth one

3 untuk aksesibilitas

Kotak centang pertama
Kotak centang kedua
Kotak centang ketiga
Kotak centang keempat
Kotak centang kelima


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

_3

Dan jika Anda ingin


  
    The current link item
  
  A second link item
  A third link item
  A fourth link item
  A disabled link item

3s sebagai


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

9 untuk area hit besar, Anda juga dapat melakukannya


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

_4

Kelancangan

Variabel


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

5

Mixin

Digunakan dalam kombinasi dengan


  An item
  A second item
  A third item
  A fourth item
  And a fifth one

_6 untuk menghasilkan untuk


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

9s


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

6

Lingkaran

Loop yang menghasilkan kelas pengubah dengan mixin


  An item
  A second item
  A third item
  A fourth item
  And a fifth one

8


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

_7

Perilaku JavaScript

Gunakan plugin JavaScript tab—sertakan satu per satu atau melalui file


  An item
  A second item
  A third item
  A fourth item
  And a fifth one

9 yang dikompilasi—untuk memperluas grup daftar kami untuk membuat panel tab dari konten lokal


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

8

Menggunakan atribut data

Anda dapat mengaktifkan navigasi grup daftar tanpa menulis JavaScript apa pun hanya dengan menentukan


  Cras justo odio
  Cras justo odio
  Cras justo odio

0 atau pada elemen. Gunakan atribut data ini pada


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

_9


  An active item
  A second item
  A third item
  A fourth item
  And a fifth one

_9

Melalui JavaScript

Aktifkan item daftar tabable melalui JavaScript (setiap item daftar harus diaktifkan satu per satu)


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

_0

Anda dapat mengaktifkan masing-masing item daftar dengan beberapa cara


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

_1

efek memudar

Untuk membuat panel tab memudar, tambahkan


  Cras justo odio
  Cras justo odio
  Cras justo odio

2 ke setiap


  Cras justo odio
  Cras justo odio
  Cras justo odio

3. Panel tab pertama juga harus memiliki


  Cras justo odio
  Cras justo odio
  Cras justo odio

4 agar konten awal terlihat


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

_2

Metode

konstruktor

Mengaktifkan elemen item daftar dan wadah konten. Tab harus memiliki


  Cras justo odio
  Cras justo odio
  Cras justo odio

_5 atau


  Cras justo odio
  Cras justo odio
  Cras justo odio

6 yang menargetkan simpul penampung di DOM


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

_3

menunjukkan

Memilih item daftar yang diberikan dan memperlihatkan panel terkaitnya. Item daftar lainnya yang sebelumnya dipilih menjadi tidak dipilih dan panel terkaitnya disembunyikan. Kembali ke pemanggil sebelum panel tab benar-benar ditampilkan (misalnya, sebelum peristiwa


  Cras justo odio
  Cras justo odio
  Cras justo odio

7 terjadi)


  A disabled item
  A second item
  A third item
  A fourth item
  And a fifth one

_4

membuang

Hancurkan tab elemen

getInstance

Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi

Bagaimana cara menambahkan kelas ke elemen Li?

Elemen dapat memiliki satu atau lebih kelas yang ditambahkan ke dalamnya menggunakan classList. metode add() .

Bagaimana cara menambahkan kelas ke elemen dalam JavaScript secara dinamis?

Pelajari cara menambahkan kelas ke elemen secara dinamis di JavaScript. .

Tambahkan Kelas ke Elemen Tubuh Menggunakan classList. menambahkan()

Tambahkan Kelas A ke Elemen Div

Menambahkan Kelas ke Elemen Div Menggunakan setAttribute()

Tambahkan Beberapa Kelas Ke Sebuah Elemen

Tambahkan Kelas A Ke Beberapa Elemen Tipe Daftar

Tambahkan Kelas ke Elemen Saat Klik

Bagaimana cara menambahkan kelas ke banyak elemen dalam JavaScript?

Untuk menambahkan kelas ke beberapa elemen di JavaScript. .

Dapatkan daftar semua elemen dengan metode seperti dokumen. querySelectorAll()

Ulangi daftar dengan forEach()

Untuk setiap elemen, panggil classList. add(class) untuk menambahkan kelas ke setiap elemen

kode javascript

Tambahkan kelas ke daftar item javascript

Item aktif

Item yang dinonaktifkan

Tautan dan tombol

Menyiram

Bernomor

Horisontal

Kelas kontekstual

Menyampaikan makna pada teknologi bantu

Dengan lencana

Konten khusus

Kotak centang dan radio

Kelancangan

Variabel

Mixin

Lingkaran

Perilaku JavaScript

Menggunakan atribut data

Melalui JavaScript

efek memudar

Metode

konstruktor

menunjukkan

membuang

getInstance

Bagaimana cara menambahkan kelas ke elemen Li?

Bagaimana cara menambahkan kelas ke elemen dalam JavaScript secara dinamis?

Bagaimana cara menambahkan kelas ke banyak elemen dalam JavaScript?

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social