How to change the class of menu anchor elements

See more:

jQuery

Hi ,

<nav class="navbar-default navbar-side" role="navigation">
                <div class="sidebar-collapse">
                    <ul class="nav" id="main-menu">
                        <li>
                            <a href="Home.aspx"><i class="fa fa-dashboard"></i>Dashboard</a>
                        </li>
                        <li>
                            <a href="chart.aspx"><i class="fa fa-bar-chart-o"></i>Charts</a>
                        </li>
                        <li>
                            <a href="ActualDeposits.aspx"><i class="fa fa-table"></i>Actual Deposits</a>
                        </li>
                        <li>
                            <a href="AdjustedAmountDetails.aspx"><i class="fa fa-table"></i>Adjusted Amounts</a>
                        </li>

                    </ul>

                </div>

            </nav>

the above is my structure of navigation .

What i want to do is ..clcking on any link i want to make it active

but to problem i am facing .. I am not able to navigate to next page if i use preventdefault but i can able to chnage the class ..

but if i remove the prevent default then class doesnt gest chnages as they refresh

<script type="text/javascript">
       $(function () {
           $('#main-menu li a').click(function (e) {
               debugger;
               e.preventDefault();
               var $this = $(this);
               $this.closest('ul').find('.active-menu').removeClass('active-menu');
               $this.parent().addClass('active-menu');

           });
       });
   </script>