可能是ThinkPHP导航高亮显示当前页面的最简便的方法

本文介绍了一种在ThinkPHP框架中实现导航栏高亮显示的简单方法,并提供了一个前端JavaScript解决方案作为补充。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  只要是做网站,导航就不得不做吧。

  只要是做导航,高亮显示当前页面就不得不做吧(如果你想用户体验更好点,不让用户知道Ta正处在网站的哪个页面怎么成)。

  做了很多网站,解决这个问题的方法其实我用过很多种。有纯用css实现的,有用css混合js或者jquery实现的,也有通过后台传值给js通过判断来实现的......但是今天做项目中我发现了一种很简单实用,但是网上又比较少有人用的方法(仅限tp框架)。

  下面给大家看个例子:

<ul>
<li class="<eq name="Think.const.ACTION_NAME" value="index">nav-li-active</eq>"> 
<a href="__APP__/Index/index">首&nbsp;页</a> 
</li>
<li class="<eq name="Think.const.ACTION_NAME" value="article">nav-li-active</eq>"> 
<a href="__APP__/Article/article">博&nbsp;文</a> 
</li>
<li class="<eq name="Think.const.ACTION_NAME" value="picture">nav-li-active</eq>"> 
<a href="__APP__/Picture/picture">相&nbsp;册</a> 
</li>
<li class="<eq name="Think.const.ACTION_NAME" value="works">nav-li-active</eq>"> 
<a href="__APP__/Works/works">作&nbsp;品</a> 
</li>
<li class="<eq name="Think.const.ACTION_NAME" value="about">nav-li-active</eq>"> 
<a href="__APP__/About/about">关&nbsp;于</a> 
</li>
<li class="<eq name="Think.const.ACTION_NAME" value="message">nav-li-active</eq>"> 
<a href="__APP__/Message/message">留言板</a> 
</li> 

</ul>

  这是我个人博客导航里面的部分代码。

  其中的关键代码是:<eq name="Think.const.ACTION_NAME" value="index">nav-li-active</eq>  只有当当前方法的名字为index时,输出nav-li-active。而这个nav-li-active就是你之前在css里面已经定义好了的类名。

还有一种在前端里面实现的方法

<script type="text/javascript">
var pathArray = location.pathname.split('/');
$("a[href*='"+pathArray[pathArray.length-1]+"']").parent('li').addClass('active');
</script>

给含有当前页面名字(页面路径的最后一个字段)超链接的li便签,添加一个.active类。(这个方法也是很简单的)

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值