Jquery Class Tab是一種JQuery插件，用于創建選項卡界面。它可以通過使用CSS類來簡化HTML代碼和JavaScript代碼的編寫。

使用Jquery Class Tab非常簡單。首先需要在HTML文件中引用JQuery和Jquery Class Tab插件的JavaScript文件：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-classtab/dist/jquery-classtab.min.js"></script>

接著，在HTML代碼中創建一個包含選項卡標題和內容的容器：

<div class="tabs">
<ul class="tab-nav">
<li><a href="#tab1">選項卡1</a></li>
<li><a href="#tab2">選項卡2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<p>選項卡1的內容。</p>
</div>
<div class="tab-pane" id="tab2">
<p>選項卡2的內容。</p>
</div>
</div>
</div>

在CSS文件中，可以設置選項卡的樣式：

.tabs {
border: 1px solid #ccc;
padding: 10px;
}
.tab-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tab-nav li {
display: inline-block;
}
.tab-nav li a {
display: block;
background-color: #f1f1f1;
padding: 10px;
text-decoration: none;
color: #333;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tab-nav li.active a {
background-color: #fff;
}
.tab-content .tab-pane {
display: none;
}
.tab-content .active {
display: block;
}

最后，在JavaScript代碼中，使用以下代碼來初始化選項卡：

$(document).ready(function() {
$('.tabs').classtab();
});

這將把選項卡容器轉換為選項卡界面。當用戶點擊選項卡標簽頁時，相應的選項卡內容將顯示在屏幕上。