Javascript 更改内容或包含文件而不刷新页面

我有一个菜单和一个content div。content div没有显示。当用户单击菜单项时，content div显示，页面平滑滚动到content div的顶部。以下是我的代码：

<div id="content">
    <div id="section1">
        <a id="bir" href="#icerikBaslik">1</a> <!-- This -->
        <a id="iki">2</a>
        <a id="uc">3</a>
        <a id="dort">4</a>
    </div>
</div>

<div id="icerikDiv">
        <h1 id="icerikBaslik">Deneme</h1>
        <p>Random content</p>
</div>

这就是菜单项。问题是，我不想失去平滑的滚动，因为我不希望页面被刷新

当用户单击另一个链接时，必须更改#icerikDiv的内容。页面仍将滚动至#icerikDiv，但内容将有所不同。这就是我想要的

如果可能的话，我想把内容数据保存在php文件中。比如“menu1.php”、“menu2.php”等等

当用户单击链接时，我是否可以在不刷新页面的情况下将相关php文件包含到#icerikDiv中

我想：

• 给每个环节一个具体的方法
• 在其中，显示#menuXcontent并滚动至#menuXcontent
• 在同一页上写下所有内容，显示：无
• 例如，单击菜单6链接时，显示#菜单6内容并滚动到它

---

但我不喜欢这样。我相信有更好的方法。

您有两个主要选择。一种是像您描述的那样，在一个页面中包含所有内容并根据需要显示。这是一个经常使用的可行解决方案。其优点是，一旦页面加载，它的响应速度非常快，因为当您单击链接时，它不需要从服务器获取数据。缺点是初始页面负载会大得多。它通常适用于个别路段相当小的现场

第二种选择是使用ajax从服务器获取内容，而无需重新加载页面。Ajax可用于从服务器获取数据或html。如果您有一个php文件，该文件以html格式提供您想要的输出，则可以使用方便的方法：

$( "#icerikDiv" ).load( "menu1.php" );

这将从menu1.php获取数据并将其放入#icerikDiv

为了避免硬编码php文件，我们可以使用数据属性，以便在每个链接上声明源代码- HTML:

---

将div目标放在data属性上并使用href作为源php可能更有意义，但这两种方式都可以。

您可以通过ajax调用从php文件加载内容，并使用javascript将其附加到页面上任何需要的位置

了解ajax：

一个简单的例子是：

$("#loadcontent").on("click", function(e){
  $.ajax({
    type: "get",
    url: "loadcontent.php",
    success: function(content){
      $("#contentdiv").html(content);
    }
  });
});

---

这会将

#contentdiv

的内容更改为

loadcontent.php

中的任何内容，如下所示？“喜欢”这个，但不是这个。因为你的全部内容都显示在页面上。我不想这样。第一步：没有内容。第二步：用户单击链接。第三步：显示与该链接相关的内容并滚动到该链接。你必须使用ajax。我不能。我不知道，时间太短了。如果我使用我自己的方法（在问题的末尾）会怎么样？但是正如您所看到的，我用a.click事件显示div。如何在a.click事件中加载、显示和滚动？您可以合并这些代码吗？您要做的是在它们单击时启动加载，并在加载完成时显示div。用一个例子更新了我的答案。我使用了你的代码，失去了平滑滚动。加载工作正常。编辑：不管怎样，我已经更改了您的代码，并没有在加载php文件时触发一个方法，只是称为加载、显示和滚动，看起来不错。但是现在还有一个问题。它总是调用menu1.php。我们如何使用参数来实现这一点？要做到这一点，您可以在php文件的每个链接上使用数据属性，它应该从中获取内容。然后在click函数中读取。上面的更新说明了这一点。

<a id="bir" href="#icerikBaslik" data-content="menu-1.php">1</a>

$(document).ready(function() {
    $('#content a').click(function () {
        $( "#icerikDiv" ).load( $(this).data('content') );
        $('#icerikDiv').show();
        scrollToElement($(this).attr('href'));
    });
});

$("#loadcontent").on("click", function(e){
  $.ajax({
    type: "get",
    url: "loadcontent.php",
    success: function(content){
      $("#contentdiv").html(content);
    }
  });
});