数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 JavaScript 创建常见问题解答页面
概述
常见问题解答 (FAQ) 是网站的主要功能，该网站涉及产品的销售、培训注册或特定领域的公司。许多用户可能会遇到许多问题，或者可能会遇到问题，因此这些问题及其解决方案会显示在常见问题解答部分，以便任何用户如果遇到任何错误，都可以通过查看网站的常见问题解答部分来解决问题，并继续他们的工作。
方法
创建常见问题解答的主要方法是手风琴。所有常见问题都以手风琴的形式格式化。手风琴是一个具有展开（打开）和折叠功能的组件。在下面给出的示例中，我们使用 HTML 和 CSS 构建了一个手风琴，并使用 javascript 提供了功能。
算法
步骤 1 − 创建 HTML 基本结构，并在代码的主体中添加一个父 div，该 div 将包含类似手风琴的组件，其中将包含常见问题解答的解决方案。
步骤 2 − 在父 div 内创建另一个 div，该 div 将包含从数组中渲染的所有常见问题。
步骤 3 − 现在初始化一个包含对象的数组，作为问题-答案的键值对。将常见问题和解决方案放入其中。还初始化空字符串类型的变量。
步骤 4 − 使用 map() 函数将数组的元素与手风琴组件 HTML 模板进行映射，并将所有元素与我们之前初始化的空字符串连接起来。
fsec += ` <div id="${i}" style="border-radius: 5px;box-shadow:0 0 5px #c5c5c5; padding:0.5rem; cursor:pointer;"> <div class="ques" onclick="showAns()"> <p style="filter: invert(1);">${f.ques}</p> <p style="filter: invert(1);">➕</p> </div> <div class="ans">${f.ans}</div> </div>`; })
步骤 5 − 现在使用 innerHTML 属性并显示包含数组所有连接元素的变量在一个变量中。
document.getElementById("faqQues").innerHTML = fsec;
步骤 6 − 为了提供打开和关闭答案部分的功能，请使用 document.getElementById() 属性在一个变量中访问“ques”元素。为了为每个常见问题提供功能，请使用 for 循环为特定元素提供 click() 事件。将“ans”类名元素样式设置为“display:none”。现在使用 if-else 条件来维护打开-关闭的功能。
var acc = document.getElementsByClassName("ques"); for (var i = 0; i < faqQuesAns.length; i++) { acc[i].addEventListener("click", function () { var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); }
示例
在这个示例中，我们使用了我们使用 HTML 构建的手风琴，并使用 Javascript 为其提供了打开关闭功能。常见问题解答页面包含一系列常见问题，这些问题显示在常见问题解答 (FAQ) 页面上。
<html>
<head>
<title>Tutorialspoint FAQ Page</title>
<style>
.faqSection {
display: flex;
flex-direction: column;
width: 40rem;
margin: auto;
}
.ques {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 800;
background: #40a944;
border-radius: 5px;
padding: 0.5rem
}
.ans {
display: none;
padding-top: 1rem;
}
</style>
</head>
<body style="height: 95vh; display: flex; place-content: center;">
<div class="faqSection>
<p style="text-align: center;">FAQ</p>
<div id="faqQues" style="display: flex;flex-direction: column;gap: 1rem;"></div>
</div>
<script>
var faqQuesAns = [
{"ques": "How to join training program courses on tutorialspoint?", "ans": `To join our training program courses, Visit us at: <a href= https://tutorialspoint.com/index.htm"> https://tutorialspoint.com/index.htm </a>`},
{"ques": "Which courses are available on tutorialspoint ?", "ans": "Get all the training program courses on our platform. Complete the training in your particular domain and get your certificate now."},
{"ques": "Benifits of joining annual membership of tutorialspoint?", "ans": `The annual membership provides you to access 5500+ hand picked quality video. Join Now: <a href="https://tutorialspoint.com/index.htm"> https://tutorialspoint.com/index.htm </a>`},
{"ques": "Who writes the contents for tutorialspoint.com?", "ans": "The content on the website are created by highly skilled professionals. A number of freelancers helped us in our effort to build a database of quality tutorials. They contributed their best tutorials into our Shared Tutorials Dictionary. We have established permanent setup in Hyderabad, INDIA, where we have a dedicated team of subject matters experts, technical writers, web developers and graphics designers who are taking the website to its next height of excellence."} ];
var fsec = "";
faqQuesAns.map((f, i) => {
fsec += ` <div id="${i}" style="border-radius: 5px;box-shadow:0 0 5px #c5c5c5; padding:0.5rem; cursor:pointer;">
<div class="ques" onclick="showAns()">
<p style="filter: invert(1);">${f.ques}</p>
<p style="filter: invert(1);">➕</p>
</div>
<div class="ans">${f.ans}</div>
</div>`;
})
document.getElementById("faqQues").innerHTML = fsec;
var qsec = document.getElementsByClassName("ques");
for (var i = 0; i < faqQuesAns.length; i++) {
qsec[i].addEventListener("click", function () {
var answer = this.nextElementSibling;
if (answer.style.display === "block") {
answer.style.display = "none";
} else {
answer.style.display = "block";
}
});
}
</script>
</body>
</html>
下图显示了网页上的所有常见问题。如上例所示，我们从数组中渲染了问题。显示的网页具有响应性，也可以在手机或平板电脑上查看。
结论
网站的常见问题解答 (FAQ) 网页是一个包含一些以前由某些用户提出的问题的页面。这些问题显示在常见问题解答页面上，以便将来如果其他用户遇到相同的问题，他们可以访问常见问题解答页面并检查其问题是否与常见问题解答页面中提到的问题相同，以便他们可以解决他们的问题。为了在实时项目中加载常见问题解答，而不是从数组中加载数据，我们可以使用一个 API，该 API 将前端连接到数据库，并直接从数据库加载问题。
856 次浏览
