关于javascript:如何利用Layui实现导航栏点击高亮效果

最近我正在开发 OneNav，心愿实现左侧导航栏的主动高亮性能，以晋升用户体验。我应用了 ChatGPT 轻松地实现了这个小性能。

OneNav后盾应用了Layui组件，因而这个办法实用于所有应用Layui组件的场合。

Layui中导航栏点击高亮

这是OneNav中原始的导航栏代码，应用的a标签进行链接跳转，每次点击的时候都会跳转到新的页面。

<ul class="layui-nav layui-nav-tree"  lay-filter="test">        <li class="layui-nav-item layui-nav-itemed">          <a class="" href="javascript:;">链接治理</a>          <dl class="layui-nav-child">            <dd><a href="/index.php?c=admin&page=link_list">我的链接</a></dd>            <dd><a href="/index.php?c=admin&page=add_link">增加链接</a></dd>            <dd><a href="/index.php?c=admin&page=imp_link">书签导入</a></dd>            <dd><a href="/index.php?c=admin&page=setting/share">书签分享</a></dd>          </dl>        </li>      </ul>

Layui中，如果要实现某个菜单高亮，只须要加上layui-this这个类即可。

于是我将上述代码给到了ChatGPT，并通知他点击高亮只须要增加现有的layui-this类，最终给出的代码如下：

<script>  $(document).ready(function() {    // 获取以后页面的 URL    var currentUrl = window.location.href;    // 遍历导航栏菜单的子菜单项    $('.layui-nav-child dd a').each(function() {      var $this = $(this);      var linkUrl = $this.attr('href');      // 如果子菜单项的链接与以后页面的 URL 匹配，则为该子菜单项增加 'layui-this' 类      if (currentUrl.indexOf(linkUrl) !== -1) {        // 移除其余菜单项的 'layui-this' 类        $('.layui-nav-child dd').removeClass('layui-this');        // 为匹配的子菜单项增加 'layui-this' 类        $this.parent().addClass('layui-this');        // 完结遍历        return false;      }    });  });</script>

这段代码首先在文档加载实现后获取以后页面的 URL。而后，它遍历所有导航栏菜单的子菜单项，查看子菜单项的链接是否与以后页面的 URL 匹配。如果匹配，它将移除其余子菜单项的 'layui-this' 类，而后为匹配的子菜单项增加 'layui-this' 类。这样，当页面加载时，相应的菜单项将会被高亮显示。

xiaoz未做任何批改，间接增加到js中亲测可用，下方是实现后的成果。

结语

正当且正确地应用ChatGPT能无效进步工作效率。如果您无奈间接应用ChatGPT，也能够尝试应用基于OpenAI开发的AsBot：https://dwz.ovh/ab3iv。

此文章首发于我的独立博客：https://blog.xiaoz.org/archives/18708