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

【问题标题】：Change Content or Include File Without Refreshing Page更改内容或包含文件而不刷新页面
【发布时间】：2015-01-18 12:04:04
【问题描述】：

我有一个菜单和一个内容 div。内容 div 未显示。当用户单击菜单项时，显示内容 div 并且页面平滑滚动到内容 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>

当用户点击“a id 1，（由 This 评论）”时，#icerikDiv 显示和页面滚动。使用这个 jQuery 方法：

  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 1000);    
};

$(document).on('click', '#content a', function () {
    $('#icerikDiv').show();
    scrollToElement($(this).attr('href'));
});

这就是一个菜单项。问题是，我不想失去平滑滚动，因此我不想刷新页面。

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

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

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

我想过：

给每个链接一个特定的方法
在其中显示#menuXcontent 并滚动到#menuXcontent
写下同一页的所有内容，显示：无；
例如，当单击 menu6 链接时，显示 #menu6content 并滚动到它

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

【问题讨论】：

喜欢这个？ jsfiddle.net/VPzxG
“喜欢”这个但不是这个。因为您的全部内容都显示在页面上。我不希望它。第一步：没有内容。第二步：用户点击链接。第三步：显示与该链接相关的内容滚动到该链接。
你必须使用ajax。
我不能。我不知道，时间太短了。如果我使用自己的方法（在问题的末尾）怎么办？

标签： javascript php jquery html css

【解决方案1】：

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

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

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

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

为了避免对 php 文件进行硬编码，我们可以使用 data 属性，以便在每个链接上声明源 - HTML：

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

Javascript：

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

将 div 目标放在 data 属性上并为源 php 使用 href 可能更有意义 - 但无论哪种方式都可以。

【讨论】：

但如您所见，我使用 a.click 事件显示 div。如何在 a.click 事件中加载、显示和滚动？你能合并这些代码吗？
您要做的是在他们单击时开始加载，并在加载完成时显示 div。用一个可能看起来如何的示例更新了我的答案。
我使用了你的代码并且失去了平滑滚动。加载工作正常。
编辑：无论如何我已经改变了你的代码，没有触发加载 php 文件的方法，只是调用加载并显示和滚动，看起来很好。但是现在又出现了另一个问题。它总是调用menu1.php。我们如何使用参数来做到这一点？
要做到这一点，您可以在每个链接上使用一个 data 属性，以及它应该从中获取内容的 php 文件。然后在点击功能中阅读。上面已更新以表明这一点。

【解决方案2】：

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

阅读 ajax： http://www.w3schools.com/ajax/ http://api.jquery.com/jquery.ajax/

一个简单的例子是：

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

这会将#contentdiv 的内容更改为从loadcontent.php 回显的任何内容。

【讨论】：