1. PmTemple首页
  2. 前端大牛

监听导航菜单在本页为高亮css

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>
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>
css:
body.a .nav li.a a,
body.b .nav li.b a{
color: red
}
.nav li a{color:#999}
效果:
监听导航菜单在本页为高亮css

原创文章,作者:余 倩倩,如若转载,请注明出处:https://www.pmtemple.com/flyingfish/3932/

发表评论

电子邮件地址不会被公开。 必填项已用*标注