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 ID或类。 $（'。row2'）。load（page）;与 $（ElementClass）.load（page）（即）这里的ElementClass是您需要在侧边栏内容中加载页面的位置。您可以在地址栏中更新网址，而无需重新加载

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

谢谢。

仪表板仅更改内容，而无需重新加载整个页面

1 个答案: