Question

我有一个菜单和一个内容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>

当用户点击＆＃34; id 1时，（由此评论）＆＃34; #icerikDiv显示和页面滚动。使用这个jQuery方法：

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

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

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

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

如果可能的话，我想在php文件中保留内容数据。喜欢＆＃34; menu1.php＆＃34;，＆＃34; menu2.php＆＃34;等

当用户点击链接时，我可以将相关的php文件包含到#icerDiv中而不刷新页面吗？

我想到了：

为每个链接提供特定方法
在其中，显示#menuXcontent并滚动至#menuXcontent
记下同一页面中的所有内容，显示：无;
例如，当点击menu6链接时，显示＃menu6content并滚动到它

但我不喜欢这样。我确定有更好的方法。

Answer 1

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

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

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

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

为了避免对php文件进行硬编码，我们可以使用数据属性，以便在每个链接上声明源代码 - 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目标放在数据属性上并使用href作为源php可能更有意义 - 但它可以以任何方式工作。

Answer 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回显的内容。

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

2 个答案: