Lớp css hoạt động

you must set id or class private for each menu. Mỗi lần save lại vào localStorage thì b save 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à save vào localStorage đều chung tên active như vậy thì nó biết cái nào đang active chứ nhỉ. With your đoạn mã code has beenedited to as after

$(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 class active cho mỗi menu để chạy được nhé

Hướng dẫn các bạn cách kích hoạt menu đơn giản của blogspot. Khi chúng ta chọn và truy cập liên kết đó từ thanh Menu, thì mục truy cập sẽ được thêm Class Active để làm nổi bật, nhấn mạnh cho chúng ta biết là đang truy cập vô mục đó. active for thanh menu of blogspot menu. Khi chúng ta chọn và truy cập liên kết đó từ thanh Menu, thì mục truy cập sẽ được thêm Class Active để làm nổi bật, nhấn mạnh cho chúng ta biết là đang truy cập vô mục đó

Nội dung chính Hiển thị

• Kiểm tra tra cứu và giám sát dung lượng ổ cứng với WinDirStat
• Move widget about old interface from WordPress 5 version. 8
• Trang chủ

Các bạn có thể xem demo trực tiếp trên website này. Các bước thực hiện như sau. 1. Đầu tiên trong blogspot của các bạn phải có css có lớp đang hoạt động

Các bước thực hiện như sau.

1. Đầu tiên trong blogspot của các bạn phải có một lớp css đang hoạt động

Như vậy là khi lớp hoạt động, thẻ được kích hoạt với CSS bên trên. Để hiểu rõ hơn mình lấy ví dụ luôn về HTML như bên dưới. active thì thẻ được kích hoạt với CSS side on. Để hiểu rõ hơn mình lấy ví dụ luôn về HTML như bên dưới

    


         Bán hàng 1

    

    


         Bán hàng 2

    

    


         Bán hàng 3

    

Mục đích của chúng ta là thêm lớp hoạt động vào thẻ khi chúng ta chọn như trên. 2. Viết JavaScript như sau, các bạn copy dán trước - If thanh Menu có trang chủ (Trang chủ - Giới thiệu - Sản phẩm - Tin tức - Liên hệ)active vào thẻ

Giải thích dòng dài ra là làm nổi bật các thẻ ứng dụng có URL trùng với liên kết hiện tại của trang web, thường được áp dụng để nhấn mạnh các liên kết đang hoạt động như trong menu hoặc thanh bên của trang web

Trong bài viết này mình trình bày cách thêm lớp “tpactive” cho menu bên sidebar nhé

Ta có đoạn mã html của thanh bên như sau, nếu URL hiện tại trùng với bất kỳ thẻ nào thì đổi màu cho nó

1

2

3

4

5

6

7

8

<ul class = "menu">

<li class = "menu-item">

<a href = "#url1"<>Menu 1</a>

< / li>

<li class = "menu-item">

<a href = "#url2"<>Menu 2</a>

< / li>

< / ul>

Để thêm lớp hoạt động vào ta sử dụng đoạn javascript sau đó cộng thêm css lại lớp tpactive

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

  . tpactive{

    màu. đỏ;

  }

jQuery(hàm($) {

   var đường dẫn = cửa sổ.vị trí. href;

   $('ul a').từng(chức năng() {

      nếu (điều này. href === đường dẫn) {

         $(cái này).addClass('tpactive');

      }

   });

});

Chúc các bạn thành công nhé

5/5 - (1 bình chọn)

Chia sẻ Tweet Lưu Chia sẻ Chia sẻ

Bài viết mới

• Nút liên hệ website 200810
• Thực thi & hiển thị mã ngắn trong mô tả danh mục (mô tả kho lưu trữ), thẻ …
• Các hiệu ứng hover tiêu đề web đẹp
• Đây là 17 cách sử dụng phím Shift để giúp bạn làm chủ Windows 10
• Tạo 1 title UX Builder đơn giản, hiển thị danh mục sản phẩm woocommerce