实际项目导航栏菜单切换的简单实现

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

< html  xmlns = "http://www.w3.org/1999/xhtml" > < head >      < meta  http-equiv = "Content-Type"  content = "text/html;charset=UTF-8"  />      < title >url-test</ title >      < style  type = "text/css" >          .nav{              background-color:pink;              width:800px;              height:100px;              leight:100px;              margin:0 auto;          }          .nav ul{              list-style-type:none;              margin:0px;              padding:0px;          }          .nav ul li{              float:left;              height:100px;              line-height:100px;              width:195px;              margin-left:4px;          }          .nav ul li a{              text-decoration:none;              background-color:#c3d9ff;              display:block;              text-align:center;          }          .nav ul li a:hover{              font-size:50px;              color:red;              background-color:white;          }          .nav .current{              background-color:red;              color:white;              font-size:50px;          }      </ style > </ head > < body >                                  < div  class = "nav" >          < ul  id = "menu" >              < li >< a  href = "file:///C:/Users/Administrator/Desktop/demo/billing/menu1/html.html"  id = "menu1" >menu1</ a ></ li >              < li >< a  href = "file:///C:/Users/Administrator/Desktop/demo/billing/menu2/html.html"  id = "menu2" >menu2</ a ></ li >              < li >< a  href = "file:///C:/Users/Administrator/Desktop/demo/billing/menu3/html.html"  id = "menu3" >menu3</ a ></ li >              < li >< a  href = "file:///C:/Users/Administrator/Desktop/demo/billing/menu4/html.html"  id = "menu4" >menu4</ a ></ li >          </ ul >      </ div >      < script  type = "text/javascript"  src = "http://lib.sinaapp.com/js/jquery/1.8.1/jquery.min.js" ></ script >      < script  type = "text/javascript" >                                          $(document).ready(function(){              var currenturl = window.location.href;              if(currenturl.indexOf("/menu1/") != -1) {                  $(".nav").find("li").eq(0).find("a").addClass("current");                  return false;              } else if(currenturl.indexOf("/menu2/") != -1) {                  $(".nav").find("li").eq(1).find("a").addClass("current");                  return false;              } else if(currenturl.indexOf("/menu3/") != -1 ) {                  $(".nav").find("li").eq(2).find("a").addClass("current");                  return false;              } else if(currenturl.indexOf("/menu4") != -1) {                  $(".nav").find("li").eq(3).find("a").addClass("current");                  return false;              }           });      </ script > </ body > </ html >

demo下载：导航栏菜单切换简单实现Demo

     本文转自韩立伟 51CTO博客，原文链接：http://blog.51cto.com/hanchaohan/1320803，如需转载请自行联系原作者