实际上，我正在尝试创建一个表单实时预览。此预览基于HTML文件。我将通过HTMLFORM接受用户的输入，并使用jquery将输入值放入HTML页面元素中进行预览。但我面临着这个问题。问题如下：
问题：将所有内容粘贴到HTML预览页面后，页面会变长。我想将HTML分割成多个部分，并像所附的图像一样显示。该图像还包括分页，这将使用户在单个HTML预览的不同切片之间移动。
我的html页面代码附在下面，我需要将这个html分成两部分并隐藏第二部分，当我们点击查看第二部分时，第一部分将隐藏，第二部分将显示。我需要的设计就像我之前附上的图片一样。
样品预览
<div style="max-width: 1140px; margin:40px auto 40px auto;padding: 0; margin: 0; background: #f2f2f2; font-size: 1rem; line-height: 1.5rem; color: #746873;">
<header style="border: solid 1px #121212; padding: 1.8rem 0 4.1rem 0;text-align: center; margin-bottom: 3rem;">
<h1 id="name" style="font-size: 4.6rem;line-height: 1rem;font-weight: 400; letter-spacing: 1px;color: #000; text-transform:uppercase;"><span id="fnameH">Bianca</span> <span id="lnameH">Cruz</span></h1>
<h2 id="jobtitleH" style="font-size: 2rem;line-height: 0rem; letter-spacing: .29rem; text-transform:uppercase;">Executive managing director</h2>
</header>
<section style="display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;">
<div style="width: 25%; padding-right: 3rem; position: relative; float: left; box-sizing: border-box;">
<h3 id="contactH" style="font-size: 2rem; line-height: 2.2rem; text-transform: uppercase; margin:0 0 20px 0; letter-spacing: .20rem;">Contact</h3>
<div style="display: flex; clear: both; margin-top: 1rem; margin-bottom: 1rem;">
<div style="font-size: 25px; width: 20%; float: left; margin-top: 3px;">
<img id="addresslabelH" src="http://localhost/proresume/public/assets/images/location-icon.png" width="30" alt="location" />
</div>
<div style="width: 80%; float: right;">
<p id="addressH" style="margin:0">3120 Fairmont Ave. Rushville MO Missouri </p>
</div>
</div>
<div style="display: flex; clear: both; margin-top: 1rem; margin-bottom: 1rem;">
<div style="font-size: 25px; width: 20%; float: left; margin-top: 3px;">
<img id="emaillabelH" src="http://localhost/proresume/public/assets/images/email-icon.png" width="30" alt="email" />
</div>
<div style="width: 80%; float: right;">
<p style="margin:0"><a id="emailH" style="color:#746873; text-decoration:none;" href="mailto:biancacruz@mail.com">biancacruz@mail.com</a> </p>
</div>
</div>
<div style="display: flex; clear: both; margin-top: 1rem; margin-bottom: 1rem;">
<div style="font-size: 25px; width: 20%; float: left; margin-top: 3px;">
<img id="phoneNumberlabelH" src="http://localhost/proresume/public/assets/images/phone-icon.png" width="30" alt="phone" />
</div>
<div style="width: 80%; float: right;">
<p id="phoneNumberH" style="margin:0">660-235-9645 </p>
</div>
</div>
<div style="display: flex; clear: both; margin-top: 1rem; margin-bottom: 1rem;">
<div style="font-size: 25px; width: 20%; float: left; margin-top: 3px;">
<img id="sociallabelH1" src="http://localhost/proresume/public/assets/images/url-icon.png" width="30" alt="url" />
</div>
<div style="width: 80%; float: right;" id="socialx">
<div id="socialdlH1" class="socialdlH">
<a id="sociallinkH1" href="" style="color: #746873; text-decoration:none;">linkedin.com/biancacruz</a>
</div>
</div>
</div>
<div id="eduex">
<div class="eduDeH">
<h3 data-xtr-key="Education" style="font-size: 2rem; line-height: 2.2rem; text-transform: uppercase; margin:40px 0 20px 0; letter-spacing: .20rem;">Education</h3>
<p style="color: #000; font-weight:600; margin:15px 0 0 0;">
<span id="edustartH1">2010</span> - <span id="eduendH1">2017</span> <span id="degreenameH1">Master of Business</span>
</p>
<p id="edudescriptionH1" style="margin:5px 0 0 0;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
</p>
<p style="color: #000; font-weight:600; margin:15px 0 0 0;">
<span id="edustartH2">2010</span> - <span id="eduendH2">2017</span> <span id="degreenameH2">BA of Commerce</span>
</p>
<p id="edudescriptionH2" style="margin:5px 0 0 0;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
</p>
</div>
</div>
<h3 data-xtr-key="Languages" style="font-size: 2rem; line-height: 2.2rem; text-transform: uppercase; margin:40px 0 20px 0; letter-spacing: .20rem; border-bottom: solid 1px #dedede; padding: 0px 0 8px 0;">Languages</h3>
<p id="languagesnameH1" style="color:#000;font-weight:600; margin:0;">
Language (native)
</p>
<div id="languagesProBarH1" style="background: #b3b3b3; justify-content: flex-start; align-items: center; position: relative; display: flex; height: 15px; width: 100%; margin-top: 4px; margin-bottom: 15px;">
<span id="languagesProBarValH1" style="box-shadow: 0 10px 40px -10px #8d899b; background: #8d899b; height: 15px; width:100%;"></span>
</div>
<p id="languagesnameH2" style="color:#000;font-weight:600; margin:0;">
Some Language (C1)
</p>
<div id="languagesProBarH2" style="background: #b3b3b3; justify-content: flex-start; align-items: center; position: relative; display: flex; height: 15px; width: 100%; margin-top: 4px; margin-bottom: 15px;">
<span id="languagesProBarValH2" style="box-shadow: 0 10px 40px -10px #8d899b; background: #8d899b; height: 15px; width:80%;"></span>
</div>
<p id="languagesnameH3" style="color:#000;font-weight:600; margin:0;">
One More Language (B1)
</p>
<div id="languagesProBarH3" style="background: #b3b3b3; justify-content: flex-start; align-items: center; position: relative; display: flex; height: 15px; width: 100%; margin-top: 4px; margin-bottom: 15px;">
<span id="languagesProBarValH3" style="box-shadow: 0 10px 40px -10px #8d899b; background: #8d899b; height: 15px; width:60%;"></span>
</div>
</div>
<div style="width: 75%; position: relative; float: left; box-sizing: border-box; border-left: solid 1px #121212;">
<div style="position: relative;padding-left: 4rem;padding-bottom: 2.4rem;">
<span id="timelineLevel01H" style="position: absolute;top: -1px;left: -30px;background: #8d899b;width: 60px; height: 60px;border-radius: 50%; color: #fff;font-size: 30px; font-weight: 600;text-align: center;line-height: 60px;display: block;">01</span>
<h4 data-xtr-key="Objective" style="margin:0;font-size: 2rem;line-height: 2.4rem; text-transform:uppercase; padding: 0px 0 8px 0;border-bottom: solid 1px #dedede;margin-bottom: 1.3rem;">Professional profile</h4>
<p id="objectiveH">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
</p>
</div>
<div style="position: relative;padding-left: 4rem;padding-bottom: 2.4rem;">
<span id="timelineLevel02H" style="position: absolute;top: -1px;left: -30px;background: #8d899b;width: 60px; height: 60px;border-radius: 50%; color: #fff;font-size: 30px; font-weight: 600;text-align: center;line-height: 60px;display: block;">02</span>
<h4 data-xtr-key="Professional Experience" style="margin:0;font-size: 2rem;line-height: 2.4rem; text-transform:uppercase; padding: 0px 0 8px 0;border-bottom: solid 1px #dedede;margin-bottom: 1.3rem;">Work experience</h4>
<div id="workex">
<div id="workexpH1" class="workexpH">
<p style="color: #000; font-weight:600; margin:25px 0 0 0;">
<span id="jobstartH1">2010</span> - <span <span id="jobuptoH1">2017</span>
<span id="employernameH1">Company Name</span> / <span id="jobtitleH1">Position</span>
</p>
<div id="jobdescriptionH1">
<p style="margin:5px 0 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</p>
<ul style="margin: 7px 0 0 0;">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Duis autem vel eum iriure dolor in hendrerit in</li>
<li>Ut wisi enim ad minim veniam nisl ut aliquip ex</li>
<li>Quis nostrud exerci tation ullamcorper suscipit</li>
</ul>
</div>
</div>
<div id="workExLevel02">
<p style="color: #000; font-weight:600; margin:25px 0 0 0;">
<span id="jobstartH2">2009</span> - <span id="jobuptoH2">2010</span>
<span id="employernameH2">Company Name</span> / <span id="jobtitleH2">Position</span>
</p>
<div id="jobdescriptionH2">
<p style="margin:5px 0 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<ul style="margin: 7px 0 0 0;">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Duis autem vel eum iriure dolor in hendrerit in</li>
</ul>
</div>
</div>
<div id="workExLevel03">
<p style="color: #000; font-weight:600; margin:25px 0 0 0;">
<span id="jobstartH3">2008</span> - <span id="jobuptoH3">2009</span>
<span id="employernameH3">Company Name</span> / <span id="jobtitleH3">Position</span>
</p>
<div id="jobdescriptionH3">
<p style="margin:5px 0 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
</div>
</div>
<div style="position: relative;padding-left: 4rem;padding-bottom: 2.4rem;">
<span id="timelineLevel03H" style="position: absolute;top: -1px;left: -30px;background: #8d899b;width: 60px; height: 60px;border-radius: 50%; color: #fff;font-size: 30px; font-weight: 600;text-align: center;line-height: 60px;display: block;">03</span>
<h4 data-xtr-key="Skills" style="margin:0;font-size: 2rem;line-height: 2.4rem; text-transform:uppercase; padding: 0px 0 8px 0;border-bottom: solid 1px #dedede;margin-bottom: 1.3rem;">Professional skills</h4>
<div style="display:block; clear:both">
<div style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style=" text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_1" style="padding: 30px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">Communi-<br/>cation</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
<div id="skilllevelH_2" style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style=" text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_2" style="padding: 30px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">Team work</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
<div id="skilllevelH_3" style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style=" text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_3" style="padding: 30px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">work ethic</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
<div id="skilllevelH_4" style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style="text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_4" style="padding: 30px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">Problem solving</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
<div id="skilllevelH_5" style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style=" text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_5" style="padding: 30px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">Time managing</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
<div id="skilllevelH_6" style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style="text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_6" style="padding: 36px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">flexible</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Gaurav
你可以使用Bootstrap选项卡，因为你没有提供你的代码片段，我无法自定义它来适应你的应用程序，但你可以编辑它并添加一些JS，使选项卡在点击时切换
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
</ul>
<br>
<p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.</p>
</div>
</body>
</html>