我试图让“更多”按钮显示附加信息而不加载整个页面。我在网上查了一下，我知道我可以使用 AJAX 来实现这一点，但我刚刚开始学习 JavaScript，所以我不知道如何进行 AJAX 编码。我不确定是否有更简单的方法可以在不加载网站的情况下更新网页上的内容。 Index.html 是主文件(主页)，main_test.js 是更改页面内容的 javascript 文件。
索引.html:
<!DOCTYPE HTML>
<html lang="en-US">
<!--
Theory by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license
(templated.co/license)
-->
<html>
<head>
<title>ResuMaker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script type="text/javascript" src="main_test.js"></script>
</head>
<body>
<!-- Header -->
<header id="header">
<div class="inner">
<a href="index.html" class="logo">ResuMaker</a>
<nav id="nav">
<a href="index.html">HOME</a>
<a href="build.html">BUILD A RESUME</a>
<a href="login.html">SIGN IN/CREATE AN ACCOUNT</a>
<a href="resources.html">RESOURCES</a>
<a href="contacts.html">TALK TO US</a>
</nav>
<a href="#navPanel" class="navPanelToggle"><span class="fa fa-bars">
</span></a>
</div>
</header>
<!-- Banner -->
<section id="banner">
<h1>Welcome to Resumaker</h1>
<p> A free resume builder that helps you create professional resumes.</p>
</section>
<!-- One -->
<section id="one" class="wrapper">
<h1 style="text-align: center; font-size: 35px; font-weight : 500">How the<strong>ResuMaker </strong> works</h1>
<div class="inner">
<div class="flex flex-3">
<article>
<header>
<h2 style="text-align: center"> <strong> 1 </strong><br /></h2>
</header>
<p id="demo1" style="text-align: center"> You will input basic
information in the form input fields.</p>
<footer>
<div style="text-align:center">
<a href="#" onclick="howitworks_1()" class="button special">More</a>
</div>
</footer>
</article>
<article>
<header>
<h2 style="text-align: center"><strong> 2 </strong><br /></h2>
</header>
<p id="demo2" style="text-align: center">We will process your inputted
information from our website. </p>
<footer>
<div style="text-align:center">
<a href="#" onclick="howitworks_2()" class="button special">More</a>
</div>
</footer>
</article>
<article>
<header>
<h2 style="text-align: center"><strong> 3 </strong><br /></h2>
</header>
<p style="text-align: center" id="demo3">Then we let you select a
predefined resume template all with different fonts and designs</p>
<footer>
<div style="text-align:center">
<a href="#" onclick="howitworks_3()" class="button special">More</a>
</div>
</footer>
</article>
</div>
</div>
</section>
</body>
</html>
Main.js:
function saveFormAsTextFile()
{
var textToSave = 'First Name, Last Name, Email, Phone Number, Location,
LinkedIn, School Name\n'+
document.getElementById('first_name').value+","+
document.getElementById('last_name').value+","+
document.getElementById('user_email').value+","+
document.getElementById('phone_number').value+","+
document.getElementById('location').value+","+
document.getElementById('linkedin').value+ ","+
document.getElementById('school_name').value;
//---For CSV
var downloadLink = document.createElement('a');
downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(textToSave);
downloadLink.target = '_blank';
downloadLink.download = 'resume.csv';
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
function howitworks_1() {
document.getElementById("demo1").innerHTML =
"You will input basic information in the form input fields. We create your
resume when you input information such as personal information, educational
history, work experience and skills.";
}
function howitworks_2() {
document.getElementById("demo2").innerHTML =
"We will process the inputted information. The inputted information will be
collected, stored, converted and in turn generate arrays of information
which can be transformed into a resume.";
}
function howitworks_3() {
document.getElementById("demo3").innerHTML =
"Then we let you select a predefined resume template all with different
fonts and designs. Then, we will generate a resume based on your defined
template and all you to save it as a PDF, or Microsoft Word document.";
}
最佳答案
您可以使用 CSS 过渡来创建我认为所需的效果，而不是使用 AJAX。只要您在 CSS 中使用 max-height 而不是 height，该属性就可以进行动画处理。因此，您可以获得平滑的过渡，而不是出现消失的视觉效果。 只要内容不改变，AJAX 就没有必要。我这样做了，所以按钮也可以打开和关闭。如果您只想打开并保持打开状态，只需切换切换即可添加。
let p = document.querySelector('p')
let button = document.querySelector('button')
button.addEventListener('click', () => {
p.classList.toggle('open')
})p {
max-height: 16px;
width: 500px;
overflow: hidden;
transition: max-height ease-in-out 500ms;
}
.open {
max-height: 1000px;
transition: max-height ease-in-out 500ms;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend mauris eu sollicitudin semper. Donec vestibulum ac eros id egestas. Praesent sit amet elementum nibh. Etiam quam libero, ullamcorper nec fringilla sit amet, pretium nec nunc. Sed convallis justo tellus, vel porttitor leo egestas a. Sed ac vestibulum libero, vel.
</p>
<button>More</button>关于javascript - 我试图让 "more"按钮显示附加信息而不加载整个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53510497/