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

Question

У меня проблема с настройкой панели навигации, которая будет отображать изменения в зависимости от раздела, который я нахожусь на странице. 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 навигации (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

Попробуйте это 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>

Answer 2

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

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