Сохранить текущий пункт меню выделен

Question

У меня есть настройка меню на моей странице, которая загружает элементы в iframe. Это настраиваемые карты, которые заменяют карту Google по умолчанию. Мой вопрос заключается в том, как получить элемент меню для отображения текущего элемента для выделения?

<div id="right_col" class="clearfix"> 

      <ul> 
       <li><a href="copperwood.html" target="iframe_map">Copperwood</a></li> 
       <li><a href="canyoncrest.html" target="iframe_map">Canyon Crest/The Canyons</a></li> 
       <li><a href="riverstone.html" target="iframe_map">Riverstone</a></li> 
       <li><a href="garrystation.html" target="iframe_map">Garry Station</a></li> 
       <li><a href="legacyridge.html" target="iframe_map">Legacy Ridge</a></li> 
       <li><a href="https://maps.google.com/maps/ms?msa=0&amp;msid=217268423195093625679.0004cf68eb14897eb07b4&amp;ie=UTF8&amp;ll=49.69371,-112.868754&amp;spn=0.086835,0.089951&amp;t=m&amp;output=embed" target="iframe_map">Overall Lethbridge</a></li> 
      </ul> 

     </div> 

Мой CSS:

#right_col ul{ 
position: relative; 
list-style: none; 
top: -17px; 
} 

#right_col ul a{ 
text-decoration: none; 
color: #000000; 
display: block; 
padding:10px 10px 10px 15px; 
margin: 10px; 
background: #eeeeee; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; /* future proofing */ 
-khtml-border-radius: 10px; /* for old Konqueror browsers */ 
} 

#right_col ul a:hover{ 
background: #e9b900; 
text-decoration: none; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; /* future proofing */ 
-khtml-border-radius: 10px; /* for old Konqueror browsers */ 
} 

Answer 1

1.give первый li тег класса, такие как li class="active"..

2.Go к вашему CSS и сделать это:

.active{ 
background-color:red; // example 
} 

3. затем просто откройте

script `type="text/javascript"` 

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


</script>