jQuery是一種非常流行的JavaScript庫，用于簡化DOM操作和其他JavaScript任務。其中之一是通過使用CSS和JavaScript創建選項卡效果。

在這里，我們將向您展示如何使用jQuery和CSS創建選項卡。我們將使用pre標簽來顯示CSS代碼。

/* CSS代碼 */
.tab {
display: none;
}
.tab.active {
display: block;
}
.tab-button {
background-color: #ccc;
color: #333;
padding: 10px;
border: none;
cursor: pointer;
}
.tab-button.active {
background-color: #333;
color: #fff;
}

上述CSS代碼定義了一個.tab類和.tab-button類，其中.tab類用于隱藏選項卡內容，.tab-button類用于定義選項卡按鈕的樣式。

然后，我們將使用jQuery來激活選項卡內容并切換選項卡按鈕的樣式。以下是示例代碼：

/* jQuery代碼 */
$(document).ready(function() {
$('.tab:first-child').addClass('active');
$('.tab-button:first-child').addClass('active');
$('.tab-button').click(function() {
var index = $(this).index();
$('.tab-button').removeClass('active');
$(this).addClass('active');
$('.tab').removeClass('active');
$('.tab').eq(index).addClass('active');
});
});

在上述代碼中，我們使用jQuery選擇第一個.tab和.tab-button元素，并將它們的.active類添加到它們身上，以便它們是默認選中的。

當任何.tab-button被點擊時，我們使用index()方法確定其索引，并相應地將其.active類添加到其身上。然后，我們使用相同的索引將.active類添加到相應的.tab元素上。

運行此代碼后，您將獲得一個完全可定制的選項卡效果。