資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律如何在 Bootstrap 的自定義列表組中新增點選事件的 active 類？
我們可以使用 JavaScript 或 jQuery 在 Bootstrap 4 中的自定義列表組專案中新增 active 類。這可以透過為每個列表組專案新增 onclick 事件，然後使用 "addClass" 方法將 active 類新增到被點選的專案來實現。透過這樣做，我們可以輕鬆建立一個具有 active 狀態的自定義列表組，該狀態根據使用者互動而改變。
Bootstrap 簡介
Bootstrap 是一個流行的開源前端開發框架。
它透過提供一組預先設計的 CSS 和 JavaScript 元件來幫助建立響應式和移動優先的網頁。
Bootstrap 提供了一個網格系統，用於建立響應式和靈活的佈局，以及各種 UI 元件，如表單、按鈕、導航和模型。
Bootstrap 還擁有大量預先設計的主題和模板，可用於快速建立外觀專業的網站。
Bootstrap 被廣泛使用並得到大型社群的支援，因此在線上很容易找到資源、教程和示例。
方法 1（jQuery）
在 Bootstrap 中，您可以使用 JavaScript 或 jQuery 在點選時將 active 類新增到列表組專案中。以下是如何使用 jQuery 執行此操作的示例：
<div class="list-group">
<a href="#" class="list-group-item">Item 1</a>
<a href="#" class="list-group-item">Item 2</a>
<a href="#" class="list-group-item">Item 3</a>
</div>
<script>
$('.list-group-item').click(function() {
$('.list-group-item').removeClass('active');
$(this).addClass('active');
});
</script>
解釋
在此示例中，jQuery click 函式用於將事件偵聽器附加到所有具有類 list-group-item 的元素。當其中一個元素被點選時，removeClass 函式用於從所有列表組專案中刪除 active 類，addClass 函式用於將 active 類新增到被點選的元素。
方法 2（原生 JS）
您也可以使用純 JavaScript 來實現相同的功能：
<div class="list-group">
<a href="#" class="list-group-item" onclick="makeActive(event)">Item 1</a>
<a href="#" class="list-group-item" onclick="makeActive(event)">Item 2</a>
<a href="#" class="list-group-item" onclick="makeActive(event)">Item 3</a>
</div>
<script>
function makeActive(event) {
var previous = document.getElementsByClassName("active");
if (previous.length > 0) {
previous[0].className = previous[0].className.replace(" active", "");
}
event.target.className += " active";
}
</script>
在此示例中，onclick 屬性用於將事件偵聽器附加到所有具有類 list-group-item 的元素。當其中一個元素被點選時，會呼叫 makeActive 函式，並將事件物件作為引數傳遞。該函式首先從先前選定的元素中刪除 active 類，然後將 active 類新增到當前元素。
以上兩個示例都將 "active" 類新增到被點選的列表組專案中，這將根據 Bootstrap 樣式更改其外觀。請注意，在以上兩個示例中，您需要確保 jQuery 或 Bootstrap 已載入到您的頁面上，才能使程式碼正常工作。
輸出
7K+ 瀏覽量
