javascript - 模板继承中如何正确的高亮当前导航？（在线等...）

类似于上面这种导航，我在thinkphp中利用其模板继承的原理定义了一个base.html的文件，其中包含通用的header头部、nav导航、footer底部，其它的html文件会继承该base.html模板。

• 请问我在访问其它页面的时候如何高亮当前页面对应的导航？

• 如上图，当我访问实战页面的时候，如何高亮当前页面对应的导航，如果该导航为多级导航？

• 当我访问对应主导航的下级导航时，如何正确的高亮对应页面的子导航上的主导航？

在线等，希望各位朋友能指点下疑惑。

回复内容：

类似于上面这种导航，我在thinkphp中利用其模板继承的原理定义了一个base.html的文件，其中包含通用的header头部、nav导航、footer底部，其它的html文件会继承该base.html模板。

• 请问我在访问其它页面的时候如何高亮当前页面对应的导航？

• 如上图，当我访问实战页面的时候，如何高亮当前页面对应的导航，如果该导航为多级导航？

• 当我访问对应主导航的下级导航时，如何正确的高亮对应页面的子导航上的主导航？

在线等，希望各位朋友能指点下疑惑。

这个貌似属于js控制的吧，而且楼主也做了nav导航了，thinkphp 当中用它的标签 ，引入试试不知道行不行，因为它默认要跑入口文件 就包含 还真的需要用它的

加载页面后，判断下当前的url，是否是以header.html中的a标签的href开头，

例如当前url:xxx.com/home/xxxx => a href="xxx.com/home"，匹配后添加class active高亮

你应该是因为同一layout页面需要包含不同页面而不知如何为每个页面显示它所属的导航而困扰吧？

如果是的话，那么js方面，你可以从url入手，分析url规则，然后高亮菜单

PHP的话，url或者控制器方法都可以，也是判断，高亮的话，配合js或者css都可以实现

总的来说，你需要记住的就是，根据访问的形式不同，剥离开来，进行判断，然后高亮，就可以了。

方法1，可以用js控制，在每个包含这个base的页面中写js,特意没用ES6，方便你用。

<code>var nav = Array.prototype.slice.call(document.querySelectorAll('#nav a'));
var currentPath = location.pathname;
nav.forEach(function(a) {
    if(a.pathname === currentPath) a.classList.add('active');
});</code>

方法2，用php。思路一样，获取当前请求的页面的url，然后匹配路径，不过php那一套都一年多不用了，忘记咋写了。。。。

个人一般在_initialize中:

<code>$this->assign("cur_nav","home");</code>

<code><li name="cur_nav" value="company">class="active" ><a href="%7B:U('/clist')%7D">装修公司</a>
</li>
<li name="cur_nav" value="demand">class="active" ><a href="%7B:U('/dlist')%7D">装修招标</a>
</li></code>

类似于这种,然后模板中判断curr_nav的值。
如果导航简单的话就直接通过模块、控制器、操作组合上判断
js也能判断只是感觉页面会闪动不爽!