[Решено] Не получается выделить активный пункт меню

[vavilovas]

Нашел подобные темы, но не смог сделать правильно...

Вобщем главное горизонтальное меню:

<div id="menu">
  <ul>
    <li class="navi"><a href="index.php?route=common/home">ГЛАВНАЯ</a> </li> 
    <li class="navi"><a href="samovyvoz">САМОВЫВОЗ</a> </li>
    <li class="navi"><a href="dostavka">ДОСТАВКА</a> </li> 
    <li class="navi"><a href="contact">КОНТАКТЫ</a> </li>
    <li class="navi"><a href="garantii">ГАРАНТИИ</a> </li> 
    <li class="navi"><a href="akcii">АКЦИИ</a> </li>
    <li class="navi"><a href="index.php?route=checkout/cart">КОРЗИНА</a> </li>
    <li class="navi"><a href="index.php?route=checkout/checkout">ОФОРМЛЕНИЕ ЗАКАЗА</a> </li>

</ul>

Как выделить активный пункт меню?

 

Пробовал вот этот метод, который обсуждался на форуме:

#menu > ul > li > a.active {
background: url('../image/menulh.png') center center no-repeat;
height: 100px;
min-width: 124px;
margin-top: -14px;
}

 

 

в хидер

 

<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
$.each($("#menu a"),function(){
if(url.indexOf(this.href)>=0){
$(this).addClass('active');
};
});
});
</script> 

В этом случае выделяется не только активный пункт, но и "Главная"

[vavilovas]

Вопрос решил:

<script type="text/javascript">
$(document).ready(function(){
$('#menu > ul > li >a').each(function () {
  if($(this).attr('href') == location.href) $(this).addClass('Active');
});
});
</script>
<style>
.Active{
color: #ffd333 !important;
}
</style>