html - 当用户在该页面上时，导航栏会亮起

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');
})

fiddle

Demo

Your's Working Fiddle