Добавление и удаление активного класса из ссылки навигации

К сожалению, я безуспешно искал учебные пособия о том, как добавить и удалить класс из ссылки. Все предыдущие вопросы по этому поводу дали мне некоторое понимание, но не дали того результата, которого я хочу достичь.

Я пытаюсь иметь активное состояние для моей навигации, добавляя и удаляя класс при щелчке по ссылке.

Вот что у меня есть относительно JavaScript:

$(document).ready(function(){

    //active state  
    $(function() {
        $('li a').click(function(e) {
            e.preventDefault();
            var $this = $(this);
            $this.closest('li').children('a').removeClass('active');
            $this.parent().addClass('active');

        });
    });
});

И это моя навигация:

<div id="nav">
    <div id="main-nav" class="center">
        <ul>
            <li><a href="/photography.php">Photography</a></li>
            <li><a href="/web.php">Web</a></li>
            <li><a href="/print.php">Print</a></li>

            <li class="nav-R"><a href="/about.php">About</a></li>
            <li class="nav-R"><a href="/contact.php">Contact</a></li>
        </ul>
    </div><!-- close center -->
</div><!-- close-nav -->