运用active和hover实现导航栏的页面切换

.nav ul li a:hover{
background: #3E6EDD;
}
.nav ul li a:hover img{
display: block;
}
.nav ul li a.active{        //注意此处是  .active
background: #3E6EDD;
}
.nav ul li a.active img{
display: block;
}

<div class="nav">
<ul>
<li><a href="file.html" class="active">首&nbsp;&nbsp;页<img src="images/jiao.png" alt="" /></a></li>
<li><a href="zxft.html" >政务公开<img src="images/jiao.png" alt="" /></a></li>
<li><a href="jjdt1.html">网上办事<img src="images/jiao.png" alt="" /></a></li>
<li><a href="jjdt2.html">公众参与<img src="images/jiao.png" alt="" /></a></li>
<li><a href="##">宣传教育<img src="images/jiao.png" alt="" /></a></li>
</ul>
</div>

如上有五个链接，对应五个页面，但是导航栏一般都是固定的，只是要切换。在每一个页面上放一处class="active",而这一处对应的也就是自身页面的链接。

假设当前你看的页面是file.html,所以将class=”active“加到如上代码处。

假设你看的页面是zxft.html，则应将class=”active”加到<a href="zxft.html"  class="active">处。

以此类推。