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/flyingfish/3932/
微信扫一扫 
支付宝扫一扫 
