資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 Bootstrap 中透過 URL 展開手風琴？
Bootstrap 是一個流行的開源框架，用於構建響應式和移動優先的網站。透過提供一系列預製的設計元素和佈局元件，該框架使開發人員可以輕鬆建立標準化且專業外觀的網頁。其中一些包括表單、按鈕、導航和排版。
為了實現可展開的手風琴，我們將使用 URL 介面的雜湊屬性，通常稱為 USVString，它包含“#”後跟識別符號 URL。
語法
<a data-bs-toggle="collapse" href="<url>" role="button" aria-expanded="false" aria-controls="collapseExample">
....
</a>
<url> 必須是目標 URL，後跟可摺疊屬性的 id，以便使用 Bootstrap 的 collapse 類控制特定部分的切換。
示例 1
這裡我們有兩個識別符號，即 #personalDetials 和 #contactDetails。USVString 繫結到錨標記的 href 屬性，該屬性指向 div 的 id 屬性，以便在單擊時切換手風琴資料的 collapse 類。
演算法
步驟 1：使用 <link> 和 <script> 標記從 CDN 匯入 Bootstrap JS 和 CSS。
步驟 2：在錨標記的 href 屬性內定義雜湊 URL。
步驟 3：為 div 標記賦予與需要在手風琴中摺疊的雜湊 URL 相同的 id。
步驟 4：在錨標記的 data-bs-toggle 屬性中定義需要切換的類，在本例中為“collapse”類。
步驟 5：新增指令碼以在指令碼標記內切換類。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous">
</script>
<!--Bootstrap CSS CDN-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!--Bootstrap JS CDN-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="accordion container mt-4" id="accordionExample">
<div class="accordion-item px-4 py-3">
<h3 class="accordion-header">
<a data-bs-toggle="collapse" href="#collapseOne" role="button" aria-expanded="false"
aria-controls="collapseExample">
Personal Detials
</a>
</h3>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><strong>Name:</strong> TutorialsPoint</p>
<p><strong>Motto:</strong> Simply Easy Learning at your fingertips</p>
<p><strong>About:</strong> Tutorials Point is a leading Ed Tech company striving to provide the best learning
material on technical and non-technical subjects.</p>
</div>
</div>
</div>
<div class="accordion-item px-4 py-3">
<h3 class="accordion-header">
<a data-bs-toggle="collapse" href="#contactDetails" role="button" aria-expanded="false"
aria-controls="collapseExample">
Contact Details
</a>
</h3>
<div id="contactDetails" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><strong>Website: </strong>www.tutorialspoint.com</p>
<p><strong>Instagram: </strong>https://www.instagram.com/tutorialspoint_/</p>
<p><strong>Twitter: </strong>https://twitter.com/tutorialspoint</p>
</div>
</div>
</div>
</div>
<script>
if (location.hash !== null && location.hash !== "") {
$(location.hash + ".collapse").collapse("show");
}
</script>
</body>
</html>
示例 2
在這個例子中，我們有三個識別符號，即 #collapseOne、#CollapseTwo 和 #collapseThree。這些識別符號將用於在單擊相應部分時觸發手風琴。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous">
</script>
<!--Bootstrap CSS CDN-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!--Bootstrap JS CDN-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="accordion" id="myAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapseOne">1. What is HTML?</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing
the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/"
target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo">2. What is Bootstrap?</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web
development. It is a collection of CSS and HTML conventions. <a
href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn
more.</a></p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapseThree">3. What is CSS?</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a
given HTML element such as colors, backgrounds, fonts etc. <a
href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>
<script>
if (location.hash !== null && location.hash !== "") {
$(location.hash + ".collapse").collapse("show");
}
</script>
</body>
</html>
結論
透過 URL 展開手風琴對於包含長頁面或多個部分的網站非常有用，因為它允許使用者直接導航到內容，而無需滾動或搜尋。它還提高了網站的可訪問性，特別是對於視覺障礙使用者，他們難以導航到特定內容。
為了使用此功能，需要編寫一個唯一的指令碼，該指令碼分析 URL 並使相關的手風琴元素展開。這可以透過使用 JavaScript 和 jQuery 來完成，它們可以識別 URL 引數並根據需要調整手風琴。
更新於：2023年8月10日
804 次瀏覽
廣告