javascript - 刷新后如何根据点击的div加载php文件？

Question

所以我有如下的 div ，我所做的基本上是在准备好文档时加载一个默认的 PHP 文件，而不是根据点击的 div 加载不同的 PHP 文件。

<div class="menu">
   <div id="home" class="menu_align active_one">Home</div>
   <div id="write" class="menu_align">Write</div>
   <div id="activity" class="menu_align">Notifications</div>
</div>
<div id="main_content"></div>

<script type="text/javascript" src="jquery-3.2.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){
   $("#main_content").load('home.php');
 });
$("#home").click(function(){
   $("#main_content").load('home.php');
});
$("#write").click(function(){
   $("#main_content").load('write.php');
});
$("#activity").click(function(){
   $("#main_content").load('notifs.php');
});

所以我想要的是，如果用户点击写入并刷新页面，那么 main_content 应该加载 write.php 并且对于所有其他 div 相同。

Answer 1

您的click()活动在外面$(document).ready()添加它里面$(document).ready()。里面的那些函数。ready()函数将在 DOM 完全加载时执行。要跟踪点击的页面，请将其保存到localStorage或cookies。并在页面加载时检查是否localStorage有值，如果已加载该页面，则加载默认页面。这是工作示例。

$(document).ready(function(){
  if(localStorage.getItem("clicked")){
    var clickedPage = localStorage.getItem("clicked");
    $("#main_content").load(clickedPage);
  } else {
    $("#main_content").load('home.php');
  }
  
  $("#home").click(function(){
    $("#main_content").load('home.php'); 
    localStorage.setItem('clicked', 'home.php');
  });
  $("#write").click(function(){
    $("#main_content").load('write.php');
    localStorage.setItem('clicked', 'write.php');
  });
  $("#activity").click(function(){
    $("#main_content").load('notifs.php');
    localStorage.setItem('clicked', 'notifs.php');
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div id="home" class="menu_align active_one">Home</div>
  <div id="write" class="menu_align">Write</div>
  <div id="activity" class="menu_align">Notifications</div>
</div>
<div id="main_content"></div>