javascript - 模板继承中如何正确的高亮当前导航?(在线等...)
迷茫
迷茫 2017-04-11 13:28:21
[JavaScript讨论组]

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

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

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

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

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(5)
伊谢尔伦

个人一般在_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也能判断只是感觉页面会闪动不爽!

高洛峰

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

大家讲道理

加载页面后,判断下当前的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,方便你用。

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');
});

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号