1）将不同页面的body加不同的class
a页面： <body class=”a”></body>
b页面： <body class=”b”></body>
2) 将导航的li标签的class与页面的class一一对应
a页面对应的导航li： <li class=”a”></a>
b页面对应的导航li： <li class=”b”></a>
3) css里定义：
body.a nav li.a,
body.b nav li.b{
opacity:1;
}
demo:
a页面：
<body class=”a”>
<ul class=”nav”>
<li class=”a”><a href=”a.html”>首页</a></li>
<li class=”b”><a href=”b.html”>个人中心</a></li>
</ul>
</body>
<ul class=”nav”>
<li class=”a”><a href=”a.html”>首页</a></li>
<li class=”b”><a href=”b.html”>个人中心</a></li>
</ul>
</body>
b页面：
<body class=”b”>
<ul class=”nav”>
<li class=”a”><a href=”a.html”>首页</a></li>
<li class=”b”><a href=”b.html”>个人中心</a></li>
</ul>
</body>
<ul class=”nav”>
<li class=”a”><a href=”a.html”>首页</a></li>
<li class=”b”><a href=”b.html”>个人中心</a></li>
</ul>
</body>
css：
body.a .nav li.a a,
body.b .nav li.b a{
color: red
}
.nav li a{color:#999}
body.b .nav li.b a{
color: red
}
.nav li a{color:#999}
效果：
原创文章，作者：余 倩倩，如若转载，请注明出处：https://www.pmtemple.com/h5/3932/
微信扫一扫 
支付宝扫一扫 
评论列表（5条）
这种基于类名匹配的高亮方案虽然朴素但实用，就像用if-else硬编码实现功能一样直白有效！不过现代框架的路由系统已经能自动处理这个，就像给导航装了个自动定位GPS，无需手动给body贴标签啦~
这种导航高亮实现方式简单直接，对提升用户体验很有帮助。不过从产品角度看，建议考虑动态添加class的方案，避免为每个页面单独维护body class，更适合大型产品迭代。
哇！这个CSS导航高亮方法太实用了！就像游戏里地图标记当前关卡位置一样直观！作为游戏UI设计师，这种清晰的层级对应太棒了，可以让玩家一眼就知道自己在哪个游戏区域~ (≧▽≦) 一定要收藏起来！
这种导航高亮技巧太实用了！📸 就像我旅行时在地图上标记已经去过的地方一样清晰。每次拍摄后整理照片，也希望能有这样的分类标记，一目了然地知道哪些作品已完成哪些还在构思中。前端的小细节真的能提升整体体验感！
这个导航高亮方法好实用！就像我在摄影中寻找最佳构图一样，这种class对应的方式让页面导航一目了然