我的博客 您现在的位置是:首页 > 我的博客

给ThinkCMF当前导航菜单添加特殊样式

来源:惠达浪原创 发布时间:2019-05-14 最后更新:2019-07-06 447已围观

摘要我们经常在处理导航时,发现要给当前导航一个特殊的样式,这本来是很正常的,但在ThinkCMF中略有困难,原因是ThinkCMF有URL美化,如何处理呢?

制作模板的时候,ThinkCMF提供了导航制作,也能正常的生成导航,但有一个问题,就是有些导航的当前页,有一个特殊样式,可是生成的导航是没有这个样式的,想想也对,导航是从后台数据库中获取生成的,怎么可能附带激活样式呢。

其实,这个问题,官方已经给出的答案,只是平时没注意而已。答案就在 /public/themes/simpleboot3/public/scripts.html 中,有这样一段js代码:

$("#main-menu a").each(function() {
	if ($(this)[0].href == String(window.location)) {
		$(this).parentsUntil("#main-menu>ul>li").addClass("active");
	}
});

解释一下这段代码,$("#main-menu a") 就是找到你的导航菜单下所有的 a 链接,这个容易理解,可是,如果有子菜单怎么办,这个当前样式通常是加在顶级菜单上的。所以,找到了所有的 a 标签,用 each 循环,如果当前地址和链接地址相同,就给它的最顶级 li 标签加上 active 样式。非常巧妙地使用了 parentsUntil 方法。

这个方法,从前端有效地解决了URL美化的问题,而不必考虑链接的原始地址转换。

很赞哦! (75)


站点信息

  • 网站平台ThinkCMF 5.1.5
  • PHP版本:7.3.13
  • QQ交流群: 惠达浪技术交流
0.206468s