Текущая страница навигации CSS

Question

У меня проблема с настройкой навигационной панели, которая будет показывать изменение в зависимости от раздела I am на странице. Hover работает отлично, но не просто остается в обычном стиле, когда я на разных страницах, но он должен находиться в режиме зависания.

Это как моя навигация выглядит в HTML

<nav id="primary"> 
      <ul> 
       <li> 
        <a class="home" href="#home">MAIN_PAGE</a> 
       </li> 
       <li> 
        <a class="challenge" href="#challenge">CHALLENGE</a> 
       </li> 
       <li> 
        <a class="zones" href="#zones">FIVE_LETHAL_ZONES</a> 
       </li> 
       <li> 
        <a class="sprintframe" href="#sprintframe">SPRINTFRAME</a> 
       </li> 
       <li> 
        <a class="hybridtouch" href="#hybridtouch">HYBRIDTOUCH</a> 
       </li> 
       <li> 
        <a class="micoach" href="#micoach">MICOACH_SPEED_CELL</a> 
       </li> 
       <li> 
        <a class="traxion" href="#traxion">TRAXION_2.0_FG</a> 
       </li> 
       <li> 
        <a class="shop" href="#shop">SHOP_NOW</a> 
       </li> 
      </ul> 
     </nav> 

Это как мой CSS навигации стиль выглядит (The PNG есть 2 точки в 2-х цветах.)

nav#primary { 
    z-index: 100000000; 
    position: fixed; 
    top: 50%; 
    right: 16px; 
    margin-top: -40px; 
} 
nav#primary li { 
    position: relative; 
    height: 20px; 
} 
nav#primary a { 
    display: block; 
    width: 20px; 
    height: 20px; 
    text-indent: -9999px; 
    background: transparent url('../images/nav-dot.png') 4px 4px no-repeat; 
} 

nav#primary a:hover, nav#primary a.active { 
    background: transparent url('../img/nav-dot.png') 4px -16px no-repeat; 
} 

Answer 1

Попробуйте этот способ, это поможет вам:

<div class="menuBar"> 
    <ul> 
     <li class="selected"><a href="index.php">HOME</a></li> 
     <li><a href="two.php">PORTFOLIO</a></li> 
     .... 
    </ul> 
</div> 

Answer 2

Попробуйте Js

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

Вы можете добавить этот код в end of your html file (до </body>)

<script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script> 
<script> 
    $('.menuBar a').click(function(){ 
     $('.menuBar a').removeClass('active'); 
     $(this).addClass('active'); 
}); 
</script>