个人中心
gpt4 book ai didi

javascript - 我试图让 "more"按钮显示附加信息而不加载整个页面

转载 作者：行者123 更新时间：2023-12-03 00:39:46 25 4
gpt4 key购买 nike

我试图让“更多”按钮显示附加信息而不加载整个页面。我在网上查了一下，我知道我可以使用 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/

25 4 0
文章推荐： javascript - 如何从数组中获取不匹配的元素？
文章推荐： internet-explorer - Selenium IE 更改事件未触发
文章推荐： parsing - 如何有效利用Alex的起始码功能？
文章推荐： javascript - 存储日期，就好像它们是在特定时区输入的一样
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com