Cara menggunakan html pilih untuk loop

Bayangkan Anda menggunakan elemen

selected-option-load/

_84 untuk menavigasi antar halaman - biasanya yang dipilih akan kembali ke opsi default saat halaman dimuat ulang. Hari ini kita akan mempelajari cara mempertahankan opsi yang dipilih, memastikan bahwa halaman apa pun yang telah Anda pilih tetap dipilih bahkan setelah halaman baru ditampilkan. Untuk mendemonstrasikannya, kami akan menggunakan proyek demo dengan beberapa halaman statis. Ayo mulai

Table of Contents Show

Struktur Proyek
Metode Pertama
Metode Kedua

Struktur Proyek

Struktur proyek terlihat seperti ini – beberapa halaman HTML dengan beberapa aset

selected-option-load/

├── animals.html

├── cars.html

├── index.html

├── motorcycles.html

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

HTML

Di dalam setiap halaman HTML ada

selected-option-load/

85 elemen

4_______1

├── animals.html

├── animals.html

selected-option-load/

├── animals.html

selected-option-load/

├── animals.html

Setiap opsi dikaitkan dengan halaman statis. Tautan ke halaman terkait disimpan dalam atribut

selected-option-load/

Dalam kasus sebenarnya, menu pilihan kami mungkin berisi kategori dari semua posting blog. Jadi mari kita bayangkan dengan memilih opsi

selected-option-load/

87, semua posting blog muncul. Kemudian jika kita memilih opsi

selected-option-load/

88, teks yang termasuk dalam kategori

selected-option-load/

88 muncul, dan seterusnya

Atribut

selected-option-load/

86 mungkin berisi url absolut alih-alih relatif, seperti ini

CSS

Secara default, ada batasan browser terkait gaya yang dapat kami terapkan pada elemen

selected-option-load/

85. Misalnya, tidak ada pendekatan CSS lintas-browser untuk menata elemen

selected-option-load/

Dengan mengingat hal itu, mari tambahkan beberapa aturan CSS yang akan meningkatkan tampilan

selected-option-load/

85 di semua browser

Elemen pilih bergaya (dan emoji untuk memperjelas halaman mana yang sedang kita buka)

Inilah gayanya

├── cars.html

selected-option-load/

├── cars.html

selected-option-load/

├── cars.html

selected-option-load/

├── cars.html

selected-option-load/

├── cars.html

selected-option-load/

├── index.html

├── index.html

├── index.html

├── index.html

├── index.html

├── index.html

├── index.html

├── index.html

├── index.html

Perlu disebutkan bahwa sejumlah perpustakaan JavaScript yang kuat tersedia untuk memanipulasi elemen

selected-option-load/

85. Dua contoh Terpilih. js dan Select2. js

JavaScript

Setiap kali opsi dipilih, halaman terkait harus dimuat dan opsi target harus ditandai sebagai dipilih. Kita akan membahas dua metode serupa yang sama-sama menerapkan hal ini

Metode Pertama

Mengenai metode pertama, kita harus melakukan hal berikut

Mengambil url halaman yang terkait dengan opsi yang dipilih dan kekuatan pengalihan ke Halaman ini
Ulangi semua opsi, ambil nilai atribut
```
selected-option-load/
```
86 mereka, dan periksa untuk melihat apakah nilai ini merupakan bagian dari url halaman atau tidak. Jika demikian, kami menandai opsi terkait sebagai dipilih dan melompat keluar dari loop

Ini kode yang diperlukan

├── motorcycles.html

├── motorcycles.html

├── motorcycles.html

├── motorcycles.html

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

├── index.html

selected-option-load/

├── index.html

selected-option-load/

├── index.html

selected-option-load/

├── index.html

selected-option-load/

├── index.html

Seperti dibahas di atas, dalam proyek nyata nilai atribut

selected-option-load/

86 mungkin merupakan url absolut. Dalam skenario seperti itu, kami dapat memperbarui bagian kedua dari kode kami sebagai berikut

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

06_______0

├── animals.html

Catatan. Alih-alih menambahkan atribut

selected-option-load/

_97 ke opsi yang sesuai melalui JavaScript, kita dapat mengaturnya secara statis di HTML. Jadi misalnya pada halaman Hewan kita dapat menambahkan atribut

selected-option-load/

97 ke opsi

selected-option-load/

88. Namun, ini bukan pendekatan yang fleksibel karena di situs dinamis semua opsi (yang mungkin memiliki kategori posting) dapat berbagi halaman/template yang sama (lebih lanjut tentang itu di tutorial WordPress yang akan datang)

Metode Kedua

Metode kedua, yang sangat mirip dengan yang pertama, memanfaatkan penyimpanan lokal

Mengenai metode ini, kita harus melakukan hal-hal berikut

Ambil url halaman yang terkait dengan opsi yang dipilih, simpan di penyimpanan lokal, dan paksa pengalihan ke halaman ini
Ulangi semua opsi, ambil nilai
```
selected-option-load/
```
86, dan periksa untuk melihat apakah nilai ini sama dengan nilai yang disimpan di penyimpanan lokal atau tidak. Jika demikian, kami menandai opsi terkait sebagai dipilih dan melompat keluar dari loop

Ini kode yang diperlukan

├── motorcycles.html

├── motorcycles.html

├── motorcycles.html

├── motorcycles.html

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

selected-option-load/

├── index.html

selected-option-load/

├── index.html

selected-option-load/

├── index.html

selected-option-load/

├── index.html

selected-option-load/

├── index.html

selected-option-load/

├── index.html

selected-option-load/

selected-option-load/

Catatan. Solusi ini hadir dengan satu batasan. Jika kita menavigasi ke suatu halaman (misalnya halaman Hewan) tanpa terlebih dahulu memilih opsi terkait, kita tidak akan melihat opsi yang diharapkan seperti yang dipilih. Itu terjadi karena tidak ada nilai

_01 di penyimpanan lokal atau nilai yang disimpan tidak benar

Kesimpulan

Dalam tutorial ini, kita membahas dua metode untuk mempertahankan opsi yang dipilih saat memuat halaman. Meskipun kami menggunakan beberapa data statis sebagai demonstrasi, saya harap Anda memahami idenya dan Anda dapat menerapkan pengetahuan yang diperoleh hari ini dalam proyek Anda

Dalam tutorial yang akan datang, kita akan membahas cara menggabungkan teknik yang dibahas di sini ke dalam situs web WordPress. Sampai ditemukan