如何在单击链接时将页面加载到 div 中而不重新加载窗口？

Question

我有这个 html+php 代码：

<div class="categories_menu">               
<?php foreach($pt->categories as $key => $category) {
if (1) { ?>
<div class="items">
<a class="item_link" href="{{LINK videos/category/<?php echo $key?>}}" ><?php echo $category?></a>
</div>
<?php } }?>
</div>

<div id="load_cats" class="load_cats">  
 <!--load categories contents in this div -->         
</div>

第一个代码通过 php

foreach

方法创建类别菜单。

这段代码：

<a class="item_link" href="{{LINK videos/category/<?php echo $key?>}}" ><?php echo $category?></a>

当点击它时，将打开类别页面作为当前页面之外的新页面。

我想在div中打开类别页面

id="load_cats"

而不重新加载/刷新当前页面。 问题是在 div 内打开类别，而不是在浏览器中的全新窗口中打开 url。

此代码可以提供帮助，但是加载类别页面的代码是什么！！

$(".item_link").click(function() {
    $("load_cats").load("???");
});

我在这个网站上看到很多主题都谈到了这一点，但是因为我的代码基于 php

foreach

我无法使用它们。

Answer 1

你需要这个

$(() => {
  $('.categories_menu').on('click','.item_link',function(e) {
    e.preventDefault(); // stop the link
    $('#load_cats').load(this.href);
  });
});

假设 /videos/category/key1 将加载 HTML 部分

<div class="categories_menu">               
  <div class="items">
    <a class="item_link" href="/videos/category/key1" >key1</a>
  </div>
  <div class="items">
    <a class="item_link" href="/videos/category/key1" >key1</a>
  </div>
  <div class="items">
    <a class="item_link" href="/videos/category/key1" >key1</a>
  </div>
</div>

<div id="load_cats" class="load_cats">  
 <!--load categories contents in this div -->         
</div>