사용자가 해당 페이지에있을 때 내비게이션 막대가 켜짐

Question

탐색 메뉴에서 작업하지만 내가 가지고있는 질문은 내가 눌렀던 사이트에있을 때 메뉴 버튼을 연두색으로 만드는 방법입니다. 예를 들어 Dagvakt 내부에 있음을 볼 수 있습니다 ?

마우스가 위에있을 때 메뉴가 연두색 인 경우 해당 사람이 해당 사이트에있을 때도 켜져 야합니다. Jsfiddle : http://jsfiddle.net/EkLPG/

HTML :

<ul id="nav"> 
    <li><a href="#"><img src="images/home.png" /> Forside</a> 
    </li> 
    <li><a href="#"><span><img src="images/temperatur.png" /> Måling</span></a> 
    </li> 
    <li><a href="#"><span><img src="images/sol.png" /> Dagvakt</span></a> 
    </li> 
    <li><a href="#"><img src="images/kveld.png" /> Kveldsvakt</a> 
    </li> 
    <li><a href="#"><img src="images/vaske.png" /> Kontroll CM</a> 
    </li> 
    <li><a href="#"><img src="images/søk.png" /> Søk</a> 
    </li> 
    <li><a href="#"><img src="images/top2.png" /> Statistikk</a> 
    </li> 
    <li><a href="#"><img src="images/top3.png" /> Rapport</a> 
    </li> 
</ul> 

CSS는

ul#nav { 

    width: 1050px; 
    float: right; 
    font-family: Trebuchet MS, sans-serif; 
    font-size: 0; 
    padding: 5px 5px 5px 0; 
    background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */ 
    background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */ 
    background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */ 
    background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */ 
    background: linear-gradient(#F2F2F2, f5f5f5); /* the standard - Farge */ 
} 
ul#nav, ul#nav ul { 
    list-style: none; 
    margin: 10px 0px 0px 0px; 
} 
ul#nav, ul#nav .subs { 
    background-color: #444; 
    border: 0px solid #454545; /* Border */ 
    border-radius: 9px; 
    -moz-border-radius: 9px; 
    -webkit-border-radius: 9px; 
} 
ul#nav .subs { 
    background-color: #fff; 
    border: 2px solid #222; 
    display: none; 
    float: left; 
    left: 0; 
    padding: 0 6px 6px; 
    position: absolute; 
    top: 100%; 
    width: 300px; 
    border-radius: 7px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
} 
ul#nav li:hover>* { 
    display: block; 
} 
ul#nav li:hover { 
    position: relative; 
} 
ul#nav ul .subs { 
    left: 100%; 
    position: absolute; 
    top: 0; 
} 
ul#nav ul { 
    padding: 0 5px 5px; 
} 
ul#nav .col { 
    float: left; 
    width: 50%; 
} 
ul#nav li { 
    display: block; 
    float: left; 
    font-size: 0; 
    white-space: nowrap; 
} 
ul#nav>li, ul#nav li { 
    margin: 0 0 0 5px; 
} 
ul#nav ul>li { 
    margin: 5px 0 0; 
} 
ul#nav a:active, ul#nav a:focus { 
    outline-style: none; 
} 
ul#nav a { 
    border-style: none; 
    border-width: 0; 
    color: #181818; 
    cursor: pointer; 
    display: block; 
    font-size: 13px; 
    font-weight: bold; 
    padding: 8px 10px; 
    text-align: left; 
    text-decoration: none; 
    text-shadow: #fff 0 1px 1px; 
    vertical-align: middle; 
} 
ul#nav ul li { 
    float: none; 
    margin: 6px 0 0; 
} 
ul#nav ul a { 
    background-color: #fff; 
    border-color: #efefef; 
    border-style: solid; 
    border-width: 0 0 1px; 
    color: #000; 
    font-size: 11px; 
    padding: 4px; 
    text-align: left; 
    text-decoration: none; 
    text-shadow: #fff 0 0 0; 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
} 
ul#nav li:hover>a { 
    border-style: none; 
    color: #fff; 
    font-size: 13px; 
    font-weight: bold; 
    text-decoration: none; 
    text-shadow: #181818 0 1px 1px; 
} 
ul#nav img { 
    border: none; 
    margin-right: 8px; 
    vertical-align: middle; 
} 
ul#nav span { 
    background-position: right center; 
    background-repeat: no-repeat; 
    display: block; 
    overflow: visible; 
    padding-right: 0; 
} 
ul#nav ul li:hover>a { 
    border-color: #444; 
    border-style: solid; 
    color: #444; 
    font-size: 11px; 
    text-decoration: none; 
    text-shadow: #fff 0 0 0; 
} 
ul#nav > li >a { 
    background-color: transpa; 
    height: 25px; 
    line-height: 25px; 
    border-radius: 11px; 
    -moz-border-radius: 11px; 
    -webkit-border-radius: 11px; 
} 
ul#nav > li:hover > a { 
    background-color: #009900; 
    line-height: 25px; 
} 

Answer 1

HTML

<div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li class="active"><a href="#">profile</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 

CSS

,

ul 
{ 
    list-style-type:none; 
    width:500px; 
} 
li 
{ 
float:left; 
    display:inline-block; 
    text-align:center; 
    width:100px; 

    background-color:#003366; 
    padding:10px; 

} 
a 
{ 
    color:white; 
    text-decoration:none; 
} 
li.active { 
    background-color:red; 
    text-transform:uppercase; 

} 
li.active a{ 
    color:white; 
    text-transform:uppercase; 

} 

JQuery와 :

$('li').on('click', function(){ 
    $('li').removeClass('active'); 
    $(this).toggleClass('active'); 
}) 

바이올린

Demo

Your's Working Fiddle