How to Implement Automatic Navigation Highlighting in Layui Using ChatGPT

Recently, while developing OneNav, I aimed to implement an automatic highlighting feature for the left sidebar to enhance user experience. I used ChatGPT to easily achieve this small feature.

Since the OneNav backend uses Layui components, this method is applicable to all scenarios utilizing Layui components.

Navigation Bar Click Highlighting in Layui

This is the original navigation bar code in OneNav, which uses a tags for link jumps. Each click redirects to a new page.

<ul class="layui-nav layui-nav-tree"  lay-filter="test">
       <li class="layui-nav-item layui-nav-itemed">
         <a class="" href="javascript:;">Link Management</a>
         <dl class="layui-nav-child">
           <dd><a href="/index.php?c=admin&amp;page=link_list">My Links</a></dd>
           <dd><a href="/index.php?c=admin&amp;page=add_link">Add Link</a></dd>
           <dd><a href="/index.php?c=admin&amp;page=imp_link">Bookmark Import</a></dd>
           <dd><a href="/index.php?c=admin&amp;page=setting/share">Bookmark Sharing</a></dd>
         </dl>
       </li>
   </ul>

In Layui, to highlight a specific menu, you simply need to add the layui-this class.

I provided the above code to ChatGPT and informed it that click highlighting only requires adding the existing layui-this class. The final code provided was:

<script>
 $(document).ready(function() {
   // Get the current page URL
   var currentUrl = window.location.href;

   // Iterate through the submenu items of the navigation menu
   $('.layui-nav-child dd a').each(function() {
     var $this = $(this);
     var linkUrl = $this.attr('href');

     // If the submenu item's link matches the current page URL, add the 'layui-this' class to that submenu item
     if (currentUrl.indexOf(linkUrl) !== -1) {
       // Remove the 'layui-this' class from other menu items
       $('.layui-nav-child dd').removeClass('layui-this');

       // Add the 'layui-this' class to the matching submenu item
       $this.parent().addClass('layui-this');

       // End iteration
       return false;
     }
   });
 });
</script>

This code first retrieves the current page URL after the document loads. Then, it iterates through all submenu items of the navigation menu, checking if the submenu item's link matches the current page URL. If a match is found, it removes the 'layui-this' class from other submenu items and adds it to the matching submenu item. This way, when the page loads, the corresponding menu item will be highlighted.

Xiaoz did not make any modifications and directly added it to the JS file; it works perfectly. Below is the effect after implementation.

ChatGPT provided a corrected version of the code:

$(document).ready(function() {
  // Get the current page path
  var currentPath = window.location.pathname;

  // Iterate through the submenu items of the navigation menu
  $('.layui-nav-child dd a').each(function() {
    var $this = $(this);
    var linkPath = $this.attr('href');

    // If the submenu item's link matches the current page path, add the 'layui-this' class to that submenu item
    if (currentPath === linkPath) {
      // Remove the 'layui-this' class from other menu items
      $('.layui-nav-child dd').removeClass('layui-this');

      // Add the 'layui-this' class to the matching submenu item
      $this.parent().addClass('layui-this');

      // End iteration
      return false;
    }
  });
});

Conclusion

Reasonable and correct use of ChatGPT can effectively improve work efficiency. If you cannot use ChatGPT directly, you can also try AsBot, developed based on OpenAI: https://dwz.ovh/ab3iv.