导航点击选中效果重构-starof

一、场景

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

代码如下，样式布局我修改后如下，使用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  >        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  >  

查看更多关于导航点击选中效果重构-starof的详细内容...