title: How to change active class on li element in JQuery and redirect the user to the specified page when li elelment is clicked?
body: <p>I have the the following in my script tag. However, whenever I click the on test.php or test2.php li links, I am not redirected to the respective pages. 
  However, the active class changes from the index.php file to the test.php or test2.php file depending on which link has been clicked but I am not directed to the page. I attempted to the solutions in the following links, but now of them produce the desired result that I want, which is to redirect me to the page clicked and update the active class to the li element. </p>
  
  <p><a href="https://stackoverflow.com/questions/17975922/how-to-change-active-class-while-click-to-another-link-in-bootstrap-use-jquery">How to change active class while click to another link in bootstrap use jquery?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/27335774/active-link-after-click">Active link after click</a></p>
  
  <p>Whenever I uncomment this line e.preventDefault(), I am able to navigate to the link that have been click but the active class is not updated to the the 
  li elememnt clicked, but when the said line is commented, I am not able to navigate to the page clicked, instead, the active class is updated on the li element clicked.</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;ul class="list"&gt;
          &lt;li class="header"&gt;MAIN NAVIGATION&lt;/li&gt;
          &lt;li class="active"&gt;
              &lt;a href="index.php"&gt;
                  &lt;i class="material-icons"&gt;home&lt;/i&gt;
                  &lt;span&gt;Home&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=""&gt;
              &lt;a href="test.php"&gt;
                  &lt;i class="material-icons"&gt;group&lt;/i&gt;
                  &lt;span&gt;Test&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=""&gt;
              &lt;a href="test2.php"&gt;
                  &lt;i class="material-icons"&gt;people&lt;/i&gt;
                  &lt;span&gt;Test2&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>And the <code>script</code> code:</p>
  
  <pre><code>$(document).ready(function () {
      $('.menu .list a').click(function(e) {
  
          $('.menu li.active').removeClass('active');
  
          var $parent = $(this).parent();
          $parent.addClass('active');
          e.preventDefault();
      });
  });
  </code></pre>
  
  <p>The contents of test.php are as follows:</p>
  
  <pre><code>&lt;body class="theme-red"&gt;
      &lt;nav class="navbar"&gt;
          &lt;?php include_once('navbar.html'); ?&gt;
      &lt;/nav&gt;
      &lt;section&gt;
          &lt;aside id="leftsidebar" class="sidebar"&gt;
              &lt;?php include_once('left-side-bar.html');?&gt;
          &lt;/aside&gt;
      &lt;/section&gt;
  
      &lt;section class="content"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row clearfix"&gt;
                  &lt;table id="tbl-users" class="table"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;ID&lt;/th&gt;
                              &lt;th&gt;Name&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tfoot&gt;
                          &lt;tr&gt;
                              &lt;th&gt;ID&lt;/th&gt;
                              &lt;th&gt;Name&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/tfoot&gt;
                      &lt;tbody&gt;
                      &lt;?php
                          $accounts = get_details();
                          foreach($accounts as $acc){
                      ?&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;?php echo $acc['id']; ?&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;?php echo $acc['name']; ?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;?php
                          }
                      ?&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>