I have this script in the head:

<script>
    $(document).ready(function() {
        $('#nav a').click(function(e) {
            e.preventDefault();
            $('#content').load($(this).attr('href'));
        });
    });
</script>

On this part of script

   <div class="dropdown-menu" id="nav">
      <a href="../exercises/match_pinyin.php" class="dropdown-item" >Profile</a>

it work fine. Which means it load the php page without refresh the whole page.

Now I need to make it work with

       <div id="submenu-2" class="collapse" id="nav">
            <ul class="nav nav-small flex-column">

              <li class="nav-item">
                <a class="nav-link" href="../exercises/match_pinyin.php">Γραπτές Ασκήσεις</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="pages-utility.html">Utility Pages</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="pages-layouts.html">Layouts</a>
              </li>

            </ul>
          </div>

I also tried the below, but it load the page on a new one.

<script>
    $(document).ready(function() {
        $('#nav ul li a').click(function(e) {
            e.preventDefault();
            $('#content').load($(this).attr('href'));
        });
    });
</script>

Any idea how can I make it work?