导航点击选中效果重构

最近做重构，有一个功能是，鼠标点击链接后显示不同样式：

导航点击选中效果重构

代码如下，样式布局我修改后如下，使用bootstrap框架来做。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <title>starof test</title>
    <style type="text/css">
.menu{
border-radius:4px;
background-color:#f8f8f8;
padding:10px;
margin-top:30px;
}
.menu p{
font-size:26px;
margin-bottom:25px;
color:#76caea;
padding-left:30px;
margin-top:15px;
}
.menu .nav-pills > li > a:hover{
background-color:#8fd4e6;
}
/*page1.html页面定义*/
.menu01{
background-color:#5dc1d1;
border-radius:4px;
}
/*page2.html页面定义*/
/*.menu02{
background-color:#5dc1d1;
border-radius:4px;
}*/
/*page3.html页面定义*/
/*.menu03{
background-color:#5dc1d1;
border-radius:4px;
}*/
    </style>
</head>
<body>
<div class="col-md-2 menu">
    <p>
        <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;<span>starof</span>
    </p>
    <ul class="nav nav-pills nav-stacked">
        <li class="menu01"><a href="page1.html">page1</a></li>
        <li class="menu02"><a href="page2.html">page2</a></li>
        <li class="menu03"><a href="page3.html">page3</a></li>
    </ul>
</div>
</body>
</html>

View Code