jQuery btn-group是一個非常方便的工具,它可以讓我們輕松創建漂亮的按鈕組。
首先,我們需要在頁面中引入jQuery庫和bootstrap的css和js文件。然后,在html中創建一個div標簽,并給它一個class為btn-group。
<div class="btn-group"> <button type="button" class="btn btn-primary">按鈕1</button> <button type="button" class="btn btn-primary">按鈕2</button> <button type="button" class="btn btn-primary">按鈕3</button> </div>
以上代碼創建了一個包含三個按鈕的按鈕組,每個按鈕的樣式都是bootstrap預定義的btn-primary。
接著,我們可以使用jQuery來控制按鈕組的行為。比如,當點擊某個按鈕時,我們可以添加一個active類來表示當前選中的按鈕。
<script> $(document).ready(function(){ $('.btn-group >button').click(function(){ $(this).addClass('active').siblings().removeClass('active'); }); }); </script>
以上代碼使用了jQuery的click事件來監聽按鈕點擊,然后使用addClass和removeClass方法來添加和移除active類。
最后的效果如下圖所示:
使用jQuery btn-group,我們可以輕松創建漂亮的按鈕組,并通過jQuery控制它們的行為。