Asked Jul 10th, 2:31 PM 57 0 2
  • 57 0 2
0

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

Share
  • 57 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
Jul 11th, 1:01 AM

2 ANSWERS


Answered Jul 11th, 1:08 AM
Accepted
+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é !

Share
Avatar Phan Thành @DiepThu
Jul 12th, 3:30 AM

ok a e hiểu r ạ!

0
| Reply
Share
Answered Jul 10th, 4:06 PM
+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)
.....
}
Share
Avatar Phan Thành @DiepThu
Jul 10th, 4:35 PM

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/

0
| Reply
Share
Avatar PHAM HIEU @pviethieu
Jul 11th, 12:41 AM

@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 ???

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.