gpt4 book ai didi

javascript - 如何在不刷新页面的情况下更改内容?

转载 作者:行者123 更新时间:2023-11-28 02:29:06 25 4
gpt4 key购买 nike

以下代码是我试图在不刷新页面的情况下更改内容的代码。我在尝试调用时无法将 home.html 和其他页面执行到主页中。谁能帮帮我,我是这方面的初学者。提前致谢!

$(document).ready(function(){
$('#content').load('home.html');
})
ul #nav {
list-style:none;
padding:0;
margin: 0 0 10px 0;
}

ul #nav li {
display:inlne;
margin-right:10px;
}
<!Doctype html>
<html>

<head>
<title>Website Name</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>

<!-- Nav -->
<ul id="nav">
<li><a href="home">Home</a></li>
<li><a href="about">About Us</a></li>
<li><a href="contact">Contact</a></li>
</ul>

<!-- Content which would change without refreshing the page -->
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="simple.js">
</script>

</body>

</html>

<!-- home.html-->

<h1>Home</h1>
<p>Simple Text</p>

<!-- about.html-->

<h1>About Us</h1>
<p>Simple Text</p>

<!-- contact.html-->

<h1>Contact</h1>
<p>Simple Text</p>

最佳答案

假设

$(document).ready(function(){
$('#content').load('home.html');
})

是 simple.js 的内容,然后将 hrefs 更改为实际的 URLS,如 home.html,并使您的代码看起来像这样:

$(function() {
$("#nav").on("click","a",function(e) {
e.preventDefault(); // cancel the link
$("#content").load(this.href); // load the href
});
})

关于javascript - 如何在不刷新页面的情况下更改内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47794716/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com