Sử dụng jquery kiểm tra và thêm class active vào chuyên mục

Bài viết trước đây của mình có hướng dẫn thêm class active vào chuyên mục trên menu khi truy cập các bài viết thuộc chuyên mục đó mà theo cách làm này có nhược điểm là phức tạp vì sử dụng điều kiện, do đó mình có viết lại theo cách mới hơn và đơn giản hơn.

Ảnh minh họa của Blog mình

Với cách làm này chúng ta sẽ viết script dựa vào jquery kiểm tra URL của 2 phần tử "a", nếu chúng giống nhau thì thêm class active vào phần tử "a" của chuyên mục (tiện ích Label) hay các chuyên mục trên thanh menu. Ngoài ra khi chèn script dưới cùng trước thẻ đóng tránh bị hiện tượng trang bị giựt khi tải do chèn script trực tiếp cùng với breadcrumb hay menu. Cách làm như sau:

Chèn đoạn script dưới đây trước thẻ đóng </body> của mẫu template của bạn

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<!-- Áp dụng trong bài viết -->

<b:if cond='data:view.isPost'>

<script>//<![CDATA[

$('#backer .list-label-widget-content li a').each(function() {

  var x = $('.breadcrumbs ul li:last-child a').attr('href');

  var y = $(this).attr('href');

  if (x===y) {

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

  }

});

//]]></script>

</b:if>



<!-- Áp dụng cho trang Label -->

<b:if cond='data:view.search.label'>

<script>//<![CDATA[

$('#backer .list-label-widget-content li a').each(function() {

  var x = $("link[rel='canonical']").attr("href")

  var y = $(this).attr('href');

  if (x===y) {

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

  }

});

//]]></script>

</b:if>

Trong đó:

• #backer .list-label-widget-content li a là phần tử "a" của chuyên mục, các bạn kiểm tra thay vào cho đúng với template của các bạn.
• .breadcrumbs ul li:last-child a là phần tử "a" của đường dẫn breadcrumb trên cùng bài viết

Kiểm tra nếu template đã có sẵn link /jquery.min.js thì xóa link jquery ở trên đi nhưng lưu ý đoạn script bắt buộc phải được đặt dưới link jquery đảm bào link tải trước khi áp dụng sự kiện trong script

Xem thêm: Cách tạo đường dẫn Breadcrumb nhanh, gọn và chính xác

Các bạn viết css để làm nổi bật cho class active, ví dụ:

Copy

<style type='text/css'>

#backer .list-label-widget-content li a {

    font-weight: bold;

    color: #365899;

}

</style>

Tác dụng khi thêm class active vào chuyên mục trên menu hay trong tiện ích Label, khi truy cập các bài viết thuộc chuyên mục đó có tác dụng làm nổi bật chuyên mục đó giúp người đọc biết được đang đọc bài thuộc chuyên mục nào và họ có thể tìm kiếm bài thuộc chuyên mục đó. Với thủ thuật nhỏ này, bạn đã tạo cho website của bạn thêm phần chuyên nghiệp và hiệu quả hơn.

Nội dung chính