使用动态内容时防止刷新

Question

我使用基本的 JS 来更改网站上的内容，而无需传统的超链接。我使用它在另一个文件中加载内容并将其插入到 HTML <div> 中。每个内容页面都包含在 <div> 中。

<!-- Inside head -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#content").load("home.html");
        $("#home").click(function(){
            $("#content").load("home.html")
        });
        $("#page1").click(function(){
            $("#content").load("page1.html")
        });
        $("#page2").click(function(){
            $("#content").load("page2.html")
        });
    });
</script>

<!-- Inside body -->
<div id="content">
    <!-- Dynamic content here -->
</div>

最近我注意到这并不像我预期的那样严格工作。是的，它使用同一个页面插入内容，但它也会刷新页面，当链接不在页面顶部时，这有点烦人。所以必须向下滚动才能看到加载的内容。

如何才能获得真正动态的内容？是否需要全新的构造？

Answer 1

您可以通过返回 false 或阻止事件处理程序执行其默认操作来阻止 a 标记重新加载页面，例如：

$("#home").click(function()
{ 
   $("#content").load("home.html"); 
   return false;
});

或

$("#home").click(function(e)
{ 
   $("#content").load("home.html"); 
   e.preventDefault();
});

另外，为简洁起见，您的 ready 处理程序可以缩短为：

// no need for $(document).ready(function(), can just be as below 
$(function() 
{
   // other stuff here after document is ready
});

正如@ScottMarcus 建议的那样，您可以只加载您的内容并默认隐藏它，然后在点击处理程序中根据点击的内容显示您的内容：

<a href="#" id="home">Home</a>
<div id="content">
  <div id="home-content">Home content here, hide it on page load with css</div>
  <div id="page1-content">Page 1 content here, hide it on page load with css</div>
  <div id="page2-content">Page 2content here, hide it on page load with css</div>
</div>

#content > div
{
  display: none;
}    

// if you dont want to hide home on page load
#home-content
{
  display: block;
}

$("#home").click(function()
{ 
   $('#content > div').hide(); // could also use .fadeOut()
   $("#home-content").show(); // could also use .fadeIn()
   return false;
});