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

问题描述

问 题

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

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

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

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

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

解决方案

个人一般在_initialize中:

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

<li <eq name="cur_nav" value="company">class="active"</eq> ><a href="{:U('/clist')}">装修公司</a></li>
<li <eq name="cur_nav" value="demand">class="active"</eq> ><a href="{:U('/dlist')}">装修招标</a></li>

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

这篇关于javascript - 模板继承中如何正确的高亮当前导航？（在线等...）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！