資料結構
網路
關係型資料庫管理系統
作業系統
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.tw/index.htm"> https://tutorialspoint.tw/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.tw/index.htm"> https://tutorialspoint.tw/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 次瀏覽
