Yêu cầu thg 7 10, 2021 2:31 CH 696 0 2
  • 696 0 2
0

làm thế nào để giữ class active khi load lại page trong javascript sử dụng localstorage

Chia sẻ
  • 696 0 2

A/C nào có thể hướng dẫn e giữ class active menu khi mình load lại trang không ạ. Có ví dụ thì tốt quá. E xin cám ơn ạ!

Avatar PHAM HIEU @pviethieu
thg 7 11, 2021 1:01 SA

2 CÂU TRẢ LỜI


Đã trả lời thg 7 11, 2021 1:08 SA
Đã được chấp nhận
+2

bạn phải đặt id hoặc class riêng biệt cho mỗi menu. mỗi lần lưu lại vào localStorage thì b lưu cái id. mỗi cái id cho từng menu phải khác nhau. Sau đấy khi b load lại trang thì bạn so sánh cái id trùng với div nào thì bạn add thêm class active cho div đó chứ không phải là lưu vào localStorage đều chung tên active như vậy thì nó biết cái nào là đang active chứ nhỉ. Với đoạn code của bạn có thành sửa thành như sau :

$(document).ready(function(){
        var menuClass = localStorage.getItem('menuClass')

        var element = document.getElementById(menuClass);

        if (element) {
          element.classList.add('active');
        } else {
          element = document.getElementById("home");
          element.classList.add('active');
        }

        $(".toggle").click(function () {
          $(this).toggleClass("active");
          $('.navigation').toggleClass("active");
        });

        $(document).on('click', 'ul .list', function () {
          let menu = $(this).attr("id")

          $(this).addClass('active').siblings().removeClass('active');

          localStorage.setItem('menuClass', menu);
        })
})

Lưu ý thêm id và xóa hết tất cả class active cho mỗi menu để chạy được nhé !

Chia sẻ
Avatar Phan Thành @DiepThu
thg 7 12, 2021 3:30 SA

ok a e hiểu r ạ!

Đã trả lời thg 7 10, 2021 4:06 CH
+3

mỗi 1 lần bạn load lại trang thì mọi thứ coi như clear hoàn toàn, nên nếu bạn muốn lưu lại menu của bạn giữa các lần load trang thì cách đơn giản nhất là đẩy cái trạng thái menu của bạn vào localStorage:

// Mỗi khi có thay đổi
localStorage.set('menu', menuClass) // menuClass là biến (string) chứa tên class css của bạn

// Khi trang được load lên
window.onload = function() {
  const menuClass = localStorage.get('menu')
 console.log(menuClass)
.....
}
Chia sẻ
Avatar Phan Thành @DiepThu
thg 7 10, 2021 4:35 CH

E cũng đẩy active class vào storage nhưng mỗi lần load lại trang thì e chưa biết đẩy lại menu vừa lấy để set class active. Làm sao để biết đk ạ. Đây là code của e! https://jsfiddle.net/2d98kmq7/

Avatar PHAM HIEU @pviethieu
thg 7 11, 2021 12:41 SA

@DiepThu bạn phải đặt id hoặc class riêng biệt cho mỗi menu. mỗi lần lưu lại vào localStorage thì b lưu cái id. mỗi cái id cho từng menu phải khác nhau. Sau đấy khi b load lại trang thì bạn so sánh cái id trùng với div nào thì bạn add thêm class active cho div đó chứ không phải là lưu vào localStorage đều chung tên active như vậy thì nó biết cái nào là đang active bạn ???

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí