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

使用动态内容时防止刷新

1 个答案: