Показать активный элемент в навигационной панели

Question

Я строил навигационную панель и хотел, чтобы активный элемент был выделен (шрифт на другой цвет). Но теперь элемент по умолчанию всегда подсвечивается, и активный элемент не показывает разницы.

Мой HTML код выглядит следующим образом:

<div id='fixedbar'> 
    <div class="container"> 
     <a href="index.html#one"><img style="height:auto; width:auto; max-width:160px; max-height:160px;"src="images/logo-full-white.png"></a> 
     <nav id="fixednav"> 
      <ul> 
       <li class='navitem active'><a href='#home'><span>Home</span></a></li> 
       <li class='navitem'><a href="#work"><span>Portfolio</span></a></li> 
       <li class='navitem'><a href='#'><span>About</span></a></li> 
      </ul> 
     </nav> 
    </div> 
</div> 

CSS:

#fixedbar ul li.active a{ 
    color: #ff9933; 
} 

JS: в

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

в организме

<script> 
    $('#fixednav ul li a').click(function(){ 
    $('a').parent().removeClass('active'); 
    $(this).parent().addClass('active'); 
    });​ 
</script> 

Answer 1

Демо: http://jsfiddle.net/abhitalks/CYPL5/1/

Вы должны предназначаться для a а не li, чтобы сделать его легко. Кроме того, не забудьте создать стиль :visited, а также в противном случае, который будет применяться после нажатия.

CSS:

.active { 
    color: #ff9933 !important; 
} 

#fixedbar ul li a, #fixedbar ul li a:visited { 
    color: #00f; 
} 

JS:

$('#fixednav ul li a').click(function() { 
    $('#fixednav ul li a').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 2

Активен при нажатии или наведении курсора?

Если они оба;

Css

#fixedbar ul li.active, #fixedbar ul li:hover{ 
    background:black; //do what you want to be 
} 

/* To style just "a" element */ 

#fixedbar ul li.active a, #fixedbar ul li:hover > a{ 
    color:red; //do what you want to be 
} 

Js

$(function(){ 
    $('#fixednav ul li a').click(function(){ 
     $('#fixednav ul').find('li.active').removeClass('active'); 
     $(this).parent().addClass('active'); 

     return false; //return false to aviod scroll top. 
    }); 
});