在不影响其他元素的情况下动态更改 div 之间的页面内容答案

【问题标题】：Dynamically change page content between divs without affecting other elements在不影响其他元素的情况下动态更改 div 之间的页面内容
【发布时间】：2021-04-10 07:27:25
【问题描述】：

我正在尝试创建一个将加载内容的页面，而不是在单击链接后将用户重定向到新页面。我已经尝试过使用 ajax 但我仍然被重定向到另一个页面这是我到目前为止所做的事情

<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Page</title>
</head>
<body>
    <div class="header">
        <p> welcome page</p>
        <nav>
            <ul>
                <li><a href="home.html">home</a> </li>
                <li> <a href="about.html">About</a> </li>
            </ul>
        </nav>
        <p>Hello page</p>
        <div id="content">
            <p>Content is loaded here</p>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $("ul.nav li a").click(function(e) {
                    e.preventDefault();
                    var url = $(this).attr('href'); //get the link you want to load data from
                    $.ajax({
                        type: 'GET',
                        url: url,
                        success: function(data) {
                            $("#content").html(data);
                        }
                    });
                });
            });
        </script>
</body>
</html>

谁能帮忙！

【问题讨论】：

标签： html jquery ajax user-interface jquery-ui

【解决方案1】：

几个问题。

首先，jquery 选择器不正确，因此您没有将点击侦听器附加到正确的元素nav li a

其次，由于您使用的是浏览器将遵循的 href 属性，因此您需要在点击监听器中 return false 以防止此类行为

$(document).ready(function(){
$("nav li a").click(function(e){
    e.preventDefault();
    var url = $(this).attr('href'); //get the link you want to load data from
    $.ajax({
     type: 'GET',
     url: url,
     success: function(data) {
        $("#content").html(data);
    }
   });
   return false;
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <meta charset="utf-8">
  <title>Page</title>
</head>
<body>
  <div class="header">
    <p> welcome page</p>
    <nav>
      <ul>
        <li><a href="home.html">home</a> </li>
        <li> <a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">About</a> </li>
      </ul>
    </nav>
    <p>Hello page</p>

    <div id="content">
      <p>Content is loaded here</p>
    </div>
</body>
</html>

【讨论】：

点击链接后没有任何返回
可能存在其他问题，例如 CORS，具体取决于您的具体设置。您需要检查浏览器控制台。我已经修改了上面的内容以从 cdn（可以直接访问）返回文本，以表明原始问题已解决。点击“关于”进行测试
是的，你的 CORS 是正确的。我已经进行了一些谷歌搜索，我被告知我的 about 和 home 链接上的页面应该直接从网络服务器而不是我的磁盘加载。我正在使用 apache 网络服务器，它已启动并正在运行，但我就是想不通如何从 Web 服务器加载 html 文件

【解决方案2】：

您使用的选择器不正确； nav 是一个元素，而不是一个类。因此，您可以使用以下任何一种：

ul li a OR
ul > li > a OR
nav ul li a OR
nav > ul > li > a OR
nav a
//etc

您还需要包含 jQuery - 确保以下内容出现在您的 JS 之前：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

最后，您的 HTML 格式不正确； div.header 没有结束标签：

</div>

可以在脚本标签之前插入。

您的 JS 代码的其余部分是正确的，并且在您更正选择器后应该可以工作，但我建议您考虑使用 .load() 方法以使其简洁：

$(document).ready(function() {
    $('nav ul li a').on('click', function( e ) {
        e.preventDefault();
        let url = $(this).attr('href');
        $('#content').load(url);
    });
});

【讨论】：