Tengo este script en la cabeza:

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

En esta parte del guión

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

funciona bien Lo que significa que carga la página php sin actualizar toda la página.

Ahora necesito hacer que funcione con

 <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>

También probé lo siguiente, pero carga la página en una nueva.

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

¿Alguna idea de cómo puedo hacer que funcione?