共计 1439 个字符,预计需要花费 4 分钟才能阅读完成。
最近我正在开发 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
正文完
发表至: javascript
2023-05-09