javascript – 模板继承中如何正确的高亮当前导航?(在线等…)

宜家博客
宜家博客
宜家博客
48011
文章
0
评论
2020年6月30日21:42:06 评论 4 1262字阅读4分12秒

类似于上面这种导航,我在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,方便你用。

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那一套都一年多不用了,忘记咋写了。。。。

个人一般在_initialize中:

$this->assign("cur_nav","home");
  • class="active" >装修公司
  • class="active" >装修招标
  • 类似于这种,然后模板中判断curr_nav的值。
    如果导航简单的话就直接通过模块、控制器、操作组合上判断
    js也能判断只是感觉页面会闪动不爽!

    继续阅读
    weinxin
    欢迎加入中国站长博客之家
    本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
    宜家博客
    如何快速上手一个ThinkPHP的项目 php教程

    如何快速上手一个ThinkPHP的项目

    题主是一枚实习生,现在在一家公司做后台维护和二次开发。 公司的后台和订单系统什么的都是用ThinkPHP开发的,东西很多。 有点不知道如何下手去搞清楚这套系统的架构,数据库那边也是挺乱的(毕竟是Thi...
    关于Thinkphp实现短信验证注册的功能代码 php教程

    关于Thinkphp实现短信验证注册的功能代码

    注册功能是很多网站必做的功能,有注册功能就要有短信验证码,本文给大家分享thinkphp实现短信验证注册功能,感兴趣的朋友一起看看吧 前言 注册时经常需要用到短信验证码,本文记录一下思路和具体实现。 ...
    ThinkPHP自动验证失败的解决方法 php教程

    ThinkPHP自动验证失败的解决方法

    这篇文章主要介绍了关于ThinkPHP自动验证失败的解决方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 引用ThinkPHP2.0开发手册:ThinkPHP手册类型检查只是针对数据...
    匿名

    发表评论

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: