我的博客 您现在的位置是：首页 > 我的博客
给ThinkCMF当前导航菜单添加特殊样式
来源：惠达浪原创
发布时间：2019-05-14
最后更新：2019-07-06
2071已围观
摘要我们经常在处理导航时，发现要给当前导航一个特殊的样式，这本来是很正常的，但在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美化的问题，而不必考虑链接的原始地址转换。
很赞哦！ (415)
