jQuery idTabs 簡介 jQuery idTabs 是一個 jQuery 插件，允許您創建可以在同一頁面上切換內容的選項卡。 它允許您將選項卡和使用選項卡標記的內容分離，以便使用您自己的樣式來控制選項卡的外觀和選擇。 基本用法 首先，您需要在頁面上包含 jQuery 庫和 idTabs 插件。以下是這樣做的示例：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.idTabs.min.js"></script>

然后，您需要為每個選項卡設置一個鏈接和一個選項卡內容區域。這些鏈接應該包含一個特定的類“idTabs”和一個 href 屬性，該屬性將包含要顯示的選項卡內容區域的 ID。下面是一個示例 HTML 代碼：

<ul class="idTabs">
<li><a href="#tab1" class="selected">選項卡1</a></li>
<li><a href="#tab2">選項卡2</a></li>
<li><a href="#tab3">選項卡3</a></li>
</ul>
<div id="tab1">
<p>這是選項卡1的內容區域。</p>
</div>
<div id="tab2">
<p>這是選項卡2的內容區域。</p>
</div>
<div id="tab3">
<p>這是選項卡3的內容區域。</p>
</div>

上述代碼將創建一個帶有三個選項卡的小部件，點擊選項卡時，頁面的主內容將切換以顯示各自的內容區域。 自定義選項卡樣式 默認情況下，idTabs 將使用以下 CSS 樣式來控制選項卡的外觀：

.idTabs {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.idTabs li {
float: left;
}
.idTabs a {
display: block;
padding: 5px;
border: 1px solid #ccc;
margin-right: 5px;
text-decoration: none;
color: #333;
background-color: #f9f9f9;
}
.idTabs a:hover {
background-color: #e3e3e3;
}
.idTabs .selected {
border-bottom: none;
background-color: #fff;
}

如果您想自定義選項卡的樣式，只需在自己的 CSS 文件中指定新的樣式即可。例如，要更改選項卡標題的字體顏色和背景顏色：

.idTabs a {
color: #fff;
background-color: #007bff;
}

結論 jQuery idTabs 插件是創建選項卡控件的一個快速簡便的方法。通過簡單的 HTML、CSS 和 jQuery 代碼就可以制作出具有常見選項卡樣式的選項卡控件，并且可以輕松地為其添加樣式和自定義功能。