資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 建立網站的常見問題解答 (FAQ) 部分？
在本文中，我們將使用 JavaScript 建立一個 FAQ（常見問題解答）手風琴。手風琴用於顯示問題，點選後展開以顯示答案。我們可以在每個網站上看到 FAQ 部分，其中涵蓋了所有主要問題。今天我們將學習如何製作這些 FAQ 部分。
建立手風琴的步驟
步驟一 - 首先，我們將建立一個巢狀的 HTML div 標籤，用於容納所有問題和答案。這些 div 標籤將取決於要顯示的 QnA 的數量。
步驟二 - 我們將使用 CSS 提供更好的使用者介面。常用的屬性包括字型大小、邊距、填充、顏色等。
步驟三 - 我們還需要新增一個 JavaScript 函式，該函式將在點選時呈現答案並顯示它們。答案將透過點選問題來顯示。
示例
在下面的示例中，我們添加了一些問題併為其提供了答案。這些問題通常顯示，但只有在使用者點選後才會顯示答案。我們已將事件監聽器放置到按鈕上，並且當用戶點選連結時，它將開啟 div 並顯示答案。
#檔名：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>FAQ</title>
<style>
.layout{
width: 600px;
margin: auto;
}
.accordion{
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
/*background: r;*/
border-radius: 10px;
border: 2px solid black;
}
.accordion__question p{
margin: 5px;
padding: 0;
font-family: consolas;
font-size: 20px;
}
.accordion__answer p{
margin: 5px;
padding: 10px;
font-size: large;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
background: grey;
border-radius: 10px;
}
.accordion:hover{
cursor: pointer;
}
.accordion__answer {
display: none;
}
.accordion.active .accordion__answer {
display: block;
}
</style>
</head>
<body>
<h2 style="color:green; text-align:center">
Welcome To Tutorials Point
</h2>
<div class="layout">
<div class="accordion">
<div class="accordion__question">
<p>Who started tutorialspoint.com? When? Who owns it?</p>
</div>
<div class="accordion__answer">
<p>Tutorialspoint.com is a dedicated website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. This website was launched by an AMU alumni, Mr. Mohtashim, with a single tutorial on HTML in year 2006.</p>
</div>
</div>
<div class="accordion">
<div class="accordion__question">
<p>Where is Tutorials Point (I) Pvt. Ltd. located?</p>
</div>
<div class="accordion__answer">
<p>We are located in Hyderabad, the beautiful city of Nizam. Our postal address is −Tutorials Point (I) Pvt. Ltd., 4th Floor, INCOR 9 Building, Plot No - 283/A, Kavuri Hills, Madhapur, Hyderabad, Telangana, INDIA-500081 INDIA</p>
</div>
</div>
<div class="accordion">
<div class="accordion__question">
<p>What is current traffic on tutorialspoint.com?</p>
</div>
<div class="accordion__answer">
<p>At present, tutorialspoint.com is read by 13 million students and professionals around the world who access almost 35 million pages every month. The number of our users is multiplying every year.</p>
</div>
</div>
</div>
<script>
let answers = document.querySelectorAll(".accordion");
answers.forEach((event) => {
event.addEventListener('click', () => {
if (event.classList.contains("active")) {
event.classList.remove("active");
} else {
event.classList.add("active");
}
})
})
</script>
</body>
</html>輸出
更新於： 2022年4月25日
1K+ 次檢視
廣告