панель инструментов меняет только контент без полной перезагрузки страницы

Question

У меня есть отдельная боковая панель и контент, когда нажимается любое меню из боковой панели, оно должно показывать только правильное содержимое без обновления страницы, оно работает, но неправильно, как это

моя боковая панель - это side.html

<div class="row2 col-2">
<div class="row align-items-start">
    <div class="col-12 side-bar p-0">
        <ul class="side-bar-items p-0">
            <li class="side-bar-item">
                <a href="{% url 'dashboard' %}" title="" class="active">
                    <i class="fa fa-font-awesome"></i>
                    Boshqaruv paneli
                </a>
            </li>
            <li class="side-bar-item" id="loadbasic">
                <a href="{% url 'contacts' %}" title="" class="navlink">
                    <i class="fa fa-font-awesome"></i>
                    Aloqalar
                </a>
            </li>
         </ul>
      <div>
    </div>

мой код js

$('.row2').on("click", ".navlink", function (e) {
    e.preventDefault(); // cancel click
    var page = $(this).attr('href');
    $('.row2').load(page);
});

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

моя contacts.html страница выглядит следующим образом

 {% include 'dashboard/header.html' %}
{% include 'dashboard/side.html' %}

<!-- Dashboard -->
<div class="row3 container-fluid">
    <!-- Counting row -->
    <div class="row counting-row pb-5">
        <div class="col-10 offset-2 pt-0 pl-5">
            <div class="row justify-content-between start-dash mb-4">

заранее спасибо!

Answer 1

Вы пытаетесь загрузить содержимое внутри боковой панели, где доступны навигационные ссылки, вместо загрузки содержимого боковой панели.Пожалуйста, попробуйте изменить идентификатор DOM или класс, где вам нужно отобразить содержимое.$ (». Row2' ) нагрузка (стр.);с $ (ElementClass) .load (page) (т.е.) Здесь ElementClass - это то, что у вас есть для содержимого боковой панели, где необходимо загрузить страницу.Вы можете обновить URL в адресной строке без перезагрузки на

$('.row2').on("click", ".navlink", function (e) {
  e.preventDefault(); // cancel click
  var page = $(this).attr('href');
  $(ElementClass).load(page);
  history.pushState({}, null, page);
});

Спасибо.