在不影响其他元素的情况下动态更改 div 之间的页面内容
Posted
技术标签:
【中文标题】在不影响其他元素的情况下动态更改 div 之间的页面内容【英文标题】：Dynamically change page content between divs without affecting other elements 【发布时间】：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>
谁能帮忙！
【问题讨论】：
【参考方案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);
);
);
【讨论】：
以上是关于在不影响其他元素的情况下动态更改 div 之间的页面内容的主要内容，如果未能解决你的问题，请参考以下文章
如何在不影响 QDockWidget 的情况下更改 QMainWindow 分隔符的宽度