Tukar kelas butang lungsur selepas mengklik item lungsur dan muat semula halaman

Question

Saya cuba menukar kelas item butang lungsur turun selepas pengguna mengklik pada item dalam menu lungsur dan memuatkan semula halaman.

Kod berikut adalah sah apabila halaman dimuat semula.

$(".dropdown-content").on("click", function() {
 $('.dropbtn').toggleClass('active');
});

Adakah terdapat sebarang pilihan storan tempatan yang boleh saya gunakan? Saya baru belajar mengenainya.

Saya sedang menggunakan kod berikut untuk memanggil teks yang muncul dalam butang lungsur turun:

$(".dropbtn").text(
localStorage.getItem("selected")
? localStorage.getItem("selected")
: "Pautan yang membantu"
);
$(".dropbtn").on("klik", fungsi () {
$(".dropdown-content").toggleClass("open");
});
$(".dropdown-content a").on("klik", fungsi () {
$(".dropbtn").text($(this).text());
localStorage.setItem("selected", $(this).text());
$(".dropdown-content").removeClass("open");
});

Terima kasih banyak kepada @RedApple atas bantuan. Ia berfungsi dengan baik - hanya tertanya-tanya sama ada kelas .dropbtn boleh ditetapkan kepada aktif dengan cara yang sama apabila item .drop-down-content diklik.

Saya mencuba ini, tetapi saya rasa saya tidak menggunakannya dengan betul kerana .dropbtn tidak mengekalkan kelas aktif pada penyegaran halaman:

$(".dropdown-content").on("click", function() {
localStorage.setItem("active", $('.dropbtn').toggleClass('active'));
 $('.dropbtn').toggleClass('aktif');
});

Answer 1

Saya rasa ini patut berjaya...

let isBtnClicked = localStorage.getItem("isBtnClicked")
? localStorage.getItem("isBtnClicked")
: false;
$(".dropbtn").addClass(
isBtnClicked
? "hovered" // 在这里填入您点击按钮的类名
: ""
);
$(".dropbtn").text(
localStorage.getItem("selected")
? localStorage.getItem("selected")
: "Helpful Links"
);
$(".dropbtn").on("click", function () {
$(".dropdown-content").toggleClass("open");
isBtnClicked = !isBtnClicked;
localStorage.setItem("isBtnClicked", isBtnClicked);
});
$(".dropdown-content a").on("click", function () {
$(".dropbtn").text($(this).text());
localStorage.setItem("selected", $(this).text());
$(".dropdown-content").removeClass("open");
});