Melaksanakan kesan pengaktifan pilihan tunggal navigasi sampingan: amalan JavaScript dan CSS

Tutorial ini bertujuan untuk menyelesaikan masalah pelbagai item di menu navigasi sampingan mengaktifkan sempadan paparan serentak. Secara dinamik menguruskan kelas CSS melalui JavaScript, memastikan bahawa apabila mengklik mana -mana item menu, hanya item menu yang dipilih memaparkan sempadan pengaktifan merah, dan status pengaktifan semua item menu lain dibersihkan, dengan itu mencapai kesan pemilihan tunggal dan meningkatkan pengalaman pengguna.

Infrastruktur navigasi sampingan

Apabila membina navigasi sampingan interaktif, kami biasanya menggunakan HTML untuk menentukan struktur menu, CSS untuk mencantikkan penampilannya dan menentukan keadaan pengaktifan, dan JavaScript untuk mengendalikan logik interaksi pengguna.

Struktur HTML

Kod HTML berikut menunjukkan struktur menu navigasi sampingan biasa dengan pelbagai elemen main_list_item, masing -masing mewakili item menu utama.

 

  <meta charset="utf-8">
  <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
  <meta http-equiv="x-ua-compisan" content="ie = edge">
  <tirtle> Side Nav 


  <nav id="nav_menu_query_off">
    <menu id="main_menu">
      <li class="main_list_item">
        <div class="menu_header"> menu satu </div>
        <div class="menu_body">
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
        </div>
      </li>
      <li class="main_list_item">
        <div class="menu_header"> menu dua </div>
        <div class="menu_body">
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
        </div>
      </li>
      <li class="main_list_item">
        <div class="menu_header"> menu tiga </div>
        <div class="menu_body">
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
        </div>
      </li>
      <li class="main_list_item">
        <div class="menu_header"> menu empat </div>
        <div class="menu_body">
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
        </div>
      </li>
    </menu>
  </nav>

</tirtle>

Gaya CSS

CSS digunakan untuk menentukan susun atur dan gaya visual navigasi. Antaranya, kelas aktif adalah kunci untuk mencapai kesan pengaktifan, dan ia menambah sempadan merah ke bahagian bawah item menu.

 * {
  Margin: 0;
  Padding: 0;
  saiz kotak: kotak sempadan;
  Teks-penyerapan: Tiada;
  Senarai gaya: Tiada;
}

badan {
  Font-keluarga: 'Ebrima';
  latar belakang warna: #444444;
}

nav#nav_menu_query_off {
  Kedudukan: Tetap;
  Atas: 0;
  Kiri: 0;
  Lebar: 200px;
  Ketinggian: 100VH;
  latar belakang warna: #222222;
  Limpahan: Auto;
  Z-indeks: 2;
  Padding: 20px 0 20px 20px;
}

NAV#NAV_MENU_QUERY_OFF MENU#MAIN_MENU LI.MAIN_LIST_ITEM DIV.MENU_HEADER {
  Teks-transformasi: huruf besar;
  Padding-Bottom: 10px;
}

NAV#NAV_MENU_QUERY_OFF MENU LI {
  Warna: #f0f0f0;
}

nav#nav_menu_query_off Menu#main_menu li.main_list_item: tidak (: anak pertama) {
  padding-top: 20px;
}

.aktif {
  Sempadan-Bottom: 1px Pepejal Merah;
}

Nav ::-WebKit-Scrollbar {
  Paparan: Tiada;
}

Analisis logik JavaScript asal

Kod JavaScript asal direka untuk menambah pendengar acara klik untuk setiap item menu dan togol kelas aktifnya apabila diklik.

 const cards = document.QuerySelectorAll ('. main_list_item');
cards.foreach ((kad) => {
  const num_btn = card.QuerySelector ('. Menu_Header')
  num_btn.addeventListener ('klik', () => {
    jika (! card.classlist.contains ('aktif')) {
      card.classlist.add ('aktif');
    } else {
      card.classlist.remove ('aktif');
    }
  })
})

Masalah dengan kod ini ialah apabila item menu diklik, ia hanya memutuskan sama ada untuk menambah atau mengeluarkan kelas berdasarkan sama ada ia kini mengandungi kelas aktif. Ia tidak menyemak atau mengubah status item menu lain. Ini bermakna jika pengguna mengklik pada item menu yang berbeza secara berterusan, setiap item menu yang diklik akan diberikan kelas aktif, menghasilkan pelbagai item menu yang menunjukkan sempadan merah pada masa yang sama, yang tidak konsisten dengan kesan "satu pilihan" yang kami harapkan.

Penyelesaian untuk melaksanakan pengaktifan pilihan tunggal

Untuk mencapai kesan bahawa hanya satu item menu yang diaktifkan pada satu masa, idea teras adalah untuk terlebih dahulu membersihkan status pengaktifan semua item menu lain sebelum mengaktifkan item menu semasa. Ini boleh dilakukan dengan melintasi semua item menu dan mengeluarkan kelas aktif mereka sebelum menambahkannya.

Berikut adalah kod JavaScript yang diubahsuai:

 const cards = document.QuerySelectorAll ('. main_list_item');
cards.foreach ((kad) => {
  const num_btn = card.QuerySelector ('. Menu_Header')
  num_btn.addeventListener ('klik', () => {
    jika (! card.classlist.contains ('aktif')) {
      // Sebelum menambah kelas aktif item semasa, jelaskan kelas aktif semua item kad pertama.foreach ((item) => item.classlist.remove ('aktif'));
      card.classlist.add ('aktif');
    } else {
      // Sekiranya item semasa diaktifkan dan diklik lagi, keluarkan kelas aktif (nyahaktifkan)
      card.classlist.remove ('aktif');
    }
  })
})

Parsing Kod:

1. const cards = document.QuerySelectorAll ('. main_list_item');: Barisan ini mendapat semua elemen DOM dengan kelas main_list_item, iaitu semua item menu utama.
2. cards.foreach ((card) => {...});: Tambah pendengar acara klik untuk setiap item menu.
3. num_btn.addeventListener ('klik', () => {...});: Fungsi panggil balik dicetuskan apabila menu_header (bahagian tajuk item menu) diklik.
4. jika (! card.classlist.contains ('aktif')) {...}: Menentukan sama ada item menu yang diklik sekarang sudah aktif.
   • Jika kelas aktif tidak termasuk (iaitu, ia tidak diaktifkan):
     • cards.foreach ((item) => item.classlist.remove ('aktif'));: Ini adalah titik pengubahsuaian utama. Ia melintasi semua elemen utama_list_item sekali lagi dan memaksa kelas aktif untuk dikeluarkan. Ini memastikan bahawa semua keadaan pengaktifan lama dibersihkan sebelum item menu baru diaktifkan.
     • card.classlist.add ('aktif');: Kemudian, tambahkan kelas aktif ke item menu yang diklik sekarang untuk memaparkan sempadan merah.
   • lain {card.classlist.remove ('aktif'); }: Jika item semasa sudah mengandungi kelas aktif (iaitu, ia diaktifkan), keluarkan kelas aktif apabila diklik sekali lagi untuk mencapai kesan pengaktifan.

Contoh kod lengkap

Untuk pemahaman dan amalan yang mudah, inilah kod lengkap yang merangkumi HTML, CSS dan JavaScript yang disemak semula:

Html (index.html)

 


  <meta charset="utf-8">
  <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
  <meta http-equiv="x-ua-compisan" content="ie = edge">
  <tirtle> Side Nav 
  <link rel="stylesheet" href="style.css"> 


  <nav id="nav_menu_query_off">
    <menu id="main_menu">
      <li class="main_list_item">
        <div class="menu_header"> menu satu </div>
        <div class="menu_body">
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
        </div>
      </li>
      <li class="main_list_item">
        <div class="menu_header"> menu dua </div>
        <div class="menu_body">
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
        </div>
      </li>
      <li class="main_list_item">
        <div class="menu_header"> menu tiga </div>
        <div class="menu_body">
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
        </div>
      </li>
      <li class="main_list_item">
        <div class="menu_header"> menu empat </div>
        <div class="menu_body">
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
          <menu class="sub_menu"> </menu>
        </div>
      </li>
    </menu>
  </nav>
  <script src="script.js"> </script> 

</tirtle>

CSS (style.css)

 * {
  Margin: 0;
  Padding: 0;
  saiz kotak: kotak sempadan;
  Teks-penyerapan: Tiada;
  Senarai gaya: Tiada;
}

badan {
  Font-keluarga: 'Ebrima';
  latar belakang warna: #444444;
}

nav#nav_menu_query_off {
  Kedudukan: Tetap;
  Atas: 0;
  Kiri: 0;
  Lebar: 200px;
  Ketinggian: 100VH;
  latar belakang warna: #222222;
  Limpahan: Auto;
  Z-indeks: 2;
  Padding: 20px 0 20px 20px;
}

NAV#NAV_MENU_QUERY_OFF MENU#MAIN_MENU LI.MAIN_LIST_ITEM DIV.MENU_HEADER {
  Teks-transformasi: huruf besar;
  Padding-Bottom: 10px;
  kursor: penunjuk; / * Tambah penunjuk kursor untuk mengklik */
}

NAV#NAV_MENU_QUERY_OFF MENU LI {
  Warna: #f0f0f0;
}

nav#nav_menu_query_off Menu#main_menu li.main_list_item: tidak (: anak pertama) {
  padding-top: 20px;
}

.aktif {
  Sempadan-Bottom: 1px Pepejal Merah;
}

Nav ::-WebKit-Scrollbar {
  Paparan: Tiada;
}

JavaScript (script.js)

 const cards = document.QuerySelectorAll ('. main_list_item');
cards.foreach ((kad) => {
  const num_btn = card.QuerySelector ('. Menu_Header')
  num_btn.addeventListener ('klik', () => {
    jika (! card.classlist.contains ('aktif')) {
      // Sebelum menambah kelas aktif item semasa, jelaskan kelas aktif semua item kad pertama.foreach ((item) => item.classlist.remove ('aktif'));
      card.classlist.add ('aktif');
    } else {
      // Sekiranya item semasa diaktifkan dan diklik lagi, keluarkan kelas aktif (nyahaktifkan)
      card.classlist.remove ('aktif');
    }
  })
})

Perkara yang perlu diperhatikan dan pengoptimuman

• Pertimbangan Prestasi: Untuk navigasi kompleks dengan sejumlah besar item menu, meleleh melalui semua elemen dan mengeluarkan kelas dengan setiap klik boleh mengakibatkan sedikit overhead prestasi. Tetapi dalam senario navigasi sampingan yang paling biasa (sepuluh atau beratus -ratus item menu), overhead ini sering diabaikan.
• Delegasi Acara: Untuk jumlah item yang dihasilkan secara dinamik atau banyak, menggunakan delegasi acara dapat mengoptimumkan prestasi. Iaitu, hanya pendengar acara yang ditambah kepada elemen induk, dan gelembung peristiwa untuk menentukan elemen kanak -kanak yang diklik. Tetapi ini akan menjadikan logik JavaScript sedikit lebih rumit.
• Pengekalkan: Menguruskan keadaan pengaktifan elemen melalui kelas CSS adalah amalan yang disyorkan, yang memisahkan gaya dan tingkah laku, menjadikan kod lebih mudah difahami dan dikekalkan.
• Pengalaman Pengguna: Pastikan kawasan klik cukup besar dan memberikan maklum balas visual (seperti kursor: penunjuk) untuk meningkatkan pengalaman pengguna.

Meringkaskan

Tutorial ini memperkenalkan secara terperinci bagaimana untuk mencapai kesan pengaktifan satu pilihan menu navigasi sampingan dengan mengubah logik JavaScript. Inti adalah dengan menggunakan QuerySelectorall untuk mendapatkan semua item menu dan mengosongkan semua keadaan pengaktifan lama sebelum mengaktifkan item baru setiap kali anda mengklik. Corak ini digunakan secara meluas dalam pelbagai komponen UI, memastikan kejelasan antara muka dan jangkaan operasi pengguna. Melalui beberapa baris pengubahsuaian kod mudah, kami berjaya membetulkan tingkah laku pelbagai pilihan kepada tingkah laku pilihan tunggal yang mematuhi tabiat pengguna.

Atas ialah kandungan terperinci Melaksanakan kesan pengaktifan pilihan tunggal navigasi sampingan: amalan JavaScript dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!