使用动态内容时防止刷新

Question

我使用基本的 JS 在没有传统 hyperlinks 的情况下更改网站上的内容。我用它来加载另一个文件中的内容并将其插入到 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>

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

我怎样才能实现真正动态的内容？是否需要全新的结构？

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;
});

使用动态内容时防止刷新

Prevent refresh when using dynamic content

javascript

dynamic-content