Gunakan jQuery untuk sesuai dengan atribut HREF dan mengaktifkan elemen

Tutorial ini memperincikan cara menggunakan jQuery untuk memilih dengan tepat dan mengaktifkan elemen yang sepadan berdasarkan nilai atribut HREF elemen HTML. Artikel ini akan meneroka dua kaedah utama: menggunakan fungsi penapis () untuk penapisan bersyarat, dan terus menggunakan pemilih atribut. Dengan kod dan nota sampel, pembaca akan belajar bagaimana untuk menambah kelas pengaktifan CSS ke pautan navigasi atau sauh tertentu tanpa bergantung pada padanan URL penuh, dengan itu meningkatkan interaktiviti antara muka pengguna dan maklum balas visual.

Apabila membina laman web interaktif, sering diperlukan untuk menyerlahkan item menu navigasi atau tab berdasarkan status semasa pengguna atau kandungan halaman. Secara tradisinya, ini biasanya dicapai dengan membandingkan atribut HREF yang dikaitkan dengan dokumen.url. Walau bagaimanapun, dalam beberapa senario, seperti menggunakan sauh dalaman (seperti #TAB1) atau pengenal routing tertentu dalam satu aplikasi halaman, kita perlu lebih tepat sepadan dengan nilai tertentu atribut HREF dan bukannya keseluruhan URL. Tutorial ini akan memperkenalkan dua kaedah jQuery yang cekap untuk menyelesaikan masalah ini.

Kaedah 1: Gunakan fungsi penapis () untuk penapisan bersyarat

Kaedah Penapis JQuery () membolehkan kami melangkah melalui koleksi objek jQuery dan menapis unsur -unsur yang memenuhi syarat berdasarkan nilai pulangan fungsi panggil balik. Apabila fungsi panggil balik kembali benar, elemen akan dikekalkan dalam koleksi jQuery baru.

Langkah Pelaksanaan:

1. Pilih semua elemen pautan yang berpotensi: Pertama, gunakan pemilih umum (mis.
2. Tentukan nilai HREF sasaran: Tentukan nilai atribut HREF yang anda ingin padankan, seperti #TAB1.
3. Gunakan penapis () untuk penapis: Panggil kaedah penapis () pada koleksi pautan yang dipilih dan bandingkan atribut HREF bagi setiap pautan dengan nilai sasaran dalam fungsi panggil balik.
4. Tambah Kelas Pengaktifan: Tambah kelas pengaktifan CSS yang telah ditetapkan kepada elemen yang ditapis.

Contoh kod:

 $ (dokumen) .ready (fungsi () {
  // Tentukan nilai href khusus yang kita mahu sepadan dengan const targethref = "#tab1"; 

  // Pilih semua elemen pautan yang berpotensi const $ links = $ ('. Hs-mega-menu ul li a');

  // Gunakan kaedah penapis () untuk menapis pautan yang sepadan dengan targethref dengan atribut href $ links.filter (function () {
    // Dapatkan nilai atribut href pautan semasa dan bandingkan dengan nilai sasaran pulangan $ (this) .attr ('href') === targethref;
  }). addClass ("aktif"); // tambah kelas 'aktif' untuk pautan yang sepadan});

Kaedah 2: Gunakan pemilih atribut untuk memilih terus

JQuery (dan CSS) menyediakan pemilih harta yang kuat yang menentukan sifat -sifat elemen dan nilai -nilainya secara langsung dalam rentetan pemilih. Pendekatan ini biasanya lebih ringkas dan cekap kerana ia membolehkan penyemak imbas untuk mencari unsur -unsur yang sepadan secara langsung tanpa memerlukan lelaran JavaScript tambahan.

Langkah Pelaksanaan:

1. Pemilih atribut bangunan: Benamkan nilai HREF sasaran terus ke dalam pemilih jQuery untuk membentuk struktur seperti [href = "#tab1"].
2. Pemilih Gabungan: Menggabungkan pemilih atribut dengan jenis elemen atau pemilih kelas untuk menyempitkan julat yang sepadan.
3. Tambah Kelas Pengaktifan: Tambah kelas pengaktifan CSS ke elemen yang dipilih secara langsung.

Contoh kod:

 $ (dokumen) .ready (fungsi () {
  // Tentukan nilai href khusus yang kita mahu sepadan dengan const targethref = "#tab1";

  // Gunakan pemilih atribut secara langsung untuk memilih pautan di mana atribut href sepadan dengan targethref // Kaedah ini biasanya lebih ringkas dan cekap $ ('. Hs-mega-menu ul li a [href = "' targethref '"]'). // tambah kelas 'aktif-ujian' untuk pautan yang sepadan});

Lengkapkan contoh HTML dan CSS

Untuk lebih memahami kesan sebenar kod di atas, berikut adalah struktur HTML dan gaya CSS yang sepadan.

Gaya CSS:

 /* Tentukan kelas 'aktif' untuk menyerlahkan pautan yang dipilih*/
.aktif {
  warna: hijau; /* warna teks berubah menjadi hijau*/
  Font-Weight: Bold; /* font berani*/
}

/* Tentukan kelas 'ujian aktif' untuk menunjukkan kesan pengaktifan yang lain*/
.aktif-ujian {
  latar belakang warna: #ffdff; /* Warna latar belakang berubah menjadi cahaya ungu*/
  Sempadan-Bottom: 2px Pepejal Ungu; /* Tambah sempadan ungu di bahagian bawah*/
}

Struktur HTML:

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

<div class="hs-mega-menu">
  <ul>
    <li class="nav-item"> 
      <a class="nav-link g-py-10-md g-px-15-md" href="#tab1" role="tab" data-toggle="tab"> Stationery bercetak <i class="g-ml-10 fa-padu fa-caret-down d-sm-none"> 
    </i></a>
</li>
    <li class="nav-item"> 
      <a class="nav-link g-py-10-md g-px-15-md" href="#tab1" role="tab" data-toggle="tab"> Satu lagi pautan tab1 <i class="g-ml-10 
    </li>
    <li class = " nav-item> 
      <a class="nav-link g-py-10-md g-px-15-md" href="#tab2" role="tab" data-toggle="tab"> tab yang berbeza <i class="g-ml-10 fa-solid fa-caret-down d-sm-none"> 
    </i></a></i></a>
</li>
  </ul>
</div>

Nota dan ringkasan

• Pertimbangan Prestasi: Secara umumnya, secara langsung menggunakan pemilih atribut (Kaedah 2) adalah lebih baik daripada menggunakan kaedah penapis () (Kaedah 1), kerana ia membolehkan penyemak imbas secara langsung dipadankan semasa peringkat parsing dan pemilihan DOM, mengurangkan overhead lelaran JavaScript.
• Kebolehbacaan kod: Pemilih atribut lebih langsung dan ringkas dalam menyatakan niat, yang membantu meningkatkan kebolehbacaan kod.
• Kandungan Dinamik: Jika elemen pautan anda dimuatkan ke dalam DOM secara dinamik (contohnya melalui AJAX), pastikan untuk melaksanakan kod jQuery di atas selepas elemen dimuatkan dan ditambah ke DOM, atau menggunakan teknologi seperti Delegasi Acara.
• Perlawanan Berbilang: Kedua -dua kaedah menggunakan kelas pengaktifan kepada semua elemen yang atribut HREF sepadan dengan nilai sasaran. Jika anda hanya perlu mengaktifkan perlawanan pertama, anda boleh menghubungi kaedah .first () dalam rantai.
• Kesaksamaan yang ketat: Dalam JavaScript, === membuat perbandingan kesamaan yang ketat, yang memeriksa nilai dan jenis. Ini biasanya selamat untuk perbandingan rentetan.
• $ (dokumen) .ready (): Pastikan semua kod JavaScript dilaksanakan selepas DOM dimuatkan sepenuhnya, menghalang kesilapan yang tidak dijumpai. $ (fungsi () {...}); adalah singkatan $ (dokumen) .ready (function () {...});

Dengan menguasai kedua -dua teknologi jQuery ini, pemaju dapat mengawal status pengaktifan elemen laman web lebih fleksibel dan tepat, dengan itu mewujudkan antara muka interaktif dengan tindak balas yang lebih tepat dan pengalaman pengguna yang lebih baik. Bergantung kepada keperluan dan keutamaan khusus untuk prestasi dan kesederhanaan, anda boleh memilih kaedah yang paling sesuai.

Atas ialah kandungan terperinci Gunakan jQuery untuk sesuai dengan atribut HREF dan mengaktifkan elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!