Thêm class vào chuyên mục khi xem trang hiện tại thuộc chuyên mục đó bằng Jquery

Blogger sử dụng tên nhãn làm liên kết đến trang tìm kiếm của chính nhãn đó và sử dụng nhãn để phân loại bài đăng vào chuyên mục. Như vậy, trong Blogger bạn chỉ có 2 trang duy nhất liên quan đến chuyên mục đó là trang label search và trang post.

Khi thiết kế trang web blogspot tạo thanh menu đầu trang hoặc thêm widget Label bên sidebar để thêm đánh dấu vào chuyên mục người ta thường thêm class vào chuyên mục thêm style cho nó khác với các chuyên mục còn lại cho người đọc dễ nhận biết trang hiện tại nó thuộc chuyên mục nào.

Minh họa khi xem bài viết trên di động

Phương pháp sử dụng Jquery check URL của liên kết chuyên mục với URL của trang hiện tại hoặc URL của một element khác đang hiển thị ở trang hiện tại như trong bài viết ta có thanh breadcrumb đầu trang. Nếu hai URL giống nhau sẽ addClass vào chuyên mục.

Chẳng hạn trang web mình tạo menu trên máy tính như sau:

<div class="widget link-list flex hide-for-medium">

  <ul class="align-center">

    <li><a class="flex-align current" href="https://www.thietkeblogspot.com/" title="Trang chủ">Trang chủ</a></li>

    <li><a class="flex-align" href="https://www.thietkeblogspot.com/search/label/thu-thuat-blogspot?max-results=10" title="Thủ thuật">Thủ thuật</a></li>

    <li><a class="flex-align" href="https://www.thietkeblogspot.com/search/label/thiet-ke-blogspot?max-results=10" title="Thiết kế">Thiết kế</a></li>

    <li><a class="flex-align current" href="https://www.thietkeblogspot.com/search/label/blogspot-seo?max-results=10" title="Seo friendly">Seo friendly</a></li>

    <li><a class="flex-align" href="https://www.thietkeblogspot.com/search/label/tien-ich-blogspot?max-results=10" title="Tiện ích">Tiện ích</a></li>

    <li><a class="flex-align" href="https://www.thietkeblogspot.com/search/label/thiet-ke-contact-form?max-results=10" title="Contact form">Contact form</a></li>

    <li><a class="flex-align" href="https://www.thietkeblogspot.com/search/label/theme-blogspot?max-results=10" title="Theme blogspot">Theme blogspot</a></li>

  </ul>

</div>

Đọc thêm: Sai lầm cần tránh khi chèn URL trực tiếp trong blogspot

Lưu ý: Chèn liên kết đầy đủ bao gồm cả liên kết trang chủ không viết gọn, ví dụ không viết gọn thành:

<li><a href="/search/label/thu-thuat-blogspot?max-results=10" title="Thủ thuật">Thủ thuật</a></li>

Mình muốn khi truy trang label search hoặc trang item nếu trang hiện tại được đưa vào nhóm theo chuyên mục trên menu, mình sẽ thêm class="current" vào liên kết của chuyên mục trên menu. Mình sẽ code như sau:

Ở đây có 2 cách code theo điều kiện trang hoặc theo điều kiện script, với mỗi trường hợp mình sẽ code như sau:

Trường hợp 1: Theo điều kiện của trang

+ Trang item check theo URL của breadcrumb

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

  <script>//<![CDATA[

    window.addEventListener('load',function(){      

      $('.link-list a').each(function(){

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

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

        if(x===y){

          $(this).addClass('current')

          $('.link-list a').not($(this)).removeClass('current')

        }

      })

    })

  //]]></script>

</b:if>

+ Trang label search check URL của trang hiện tại

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

  <script>//<![CDATA[

      window.addEventListener('load',function(){

        $('.link-list a').each(function(){

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

          if(x.indexOf('?')!=-1){x=x.substr(0,x.indexOf('?'))}

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

          y=y.substr(0,y.indexOf('?'))

          if(x===y){

            $(this).addClass('current')

            $('.link-list a').not($(this)).removeClass('current')

          }

        })

      })

  //]]></script>  

</b:if>

Trường hợp 2: Theo điều kiện của script

<script>//<![CDATA[

  $('.link-list a').each(function(){

    if(data.view.isPost=='true'){

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

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

    }else if(data.view.isLabelSearch=='true'){

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

      if(x.indexOf('?')!=-1){x=x.substr(0,x.indexOf('?'))}

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

      y=y.substr(0,y.indexOf('?'))

    }

    if(x===y){

      $(this).addClass('current')

      $('.link-list a').not($(this)).removeClass('current')

    }

  })

//]]></script>

Sau khi thêm class đánh dấu vào URL của chuyên mục cũng cần viết style cho màu sắc hay màu nền cho văn bản liên kết được thêm class để dễ phân biệt.