jQuery選項卡是Web開發中比較常用的組件之一。它允許用戶在不同的選項卡之間進行切換,方便用戶查看、操作不同的內容。下面是一個簡單的jQuery選項卡的源碼。
<div class="tab-container"> <ul class="tabs"> <li class="current">選項卡1</li> <li>選項卡2</li> <li>選項卡3</li> </ul> <div class="tab-content"> <div class="tab-panel">第一個選項卡的內容</div> <div class="tab-panel">第二個選項卡的內容</div> <div class="tab-panel">第三個選項卡的內容</div> </div> </div> <script> $(document).ready(function() { $('.tabs li').click(function() { var tab_id = $(this).attr('class'); $('.tabs li').removeClass('current'); $('.tab-panel').removeClass('current'); $(this).addClass('current'); $("#"+tab_id).addClass('current'); }) }); </script>
以上代碼是一個典型的jQuery選項卡的實現方式。它由一個包含選項卡和內容的容器div組成,其中選項卡由ul和li標簽構成,內容由div標簽構成。CSS樣式可以自行添加。
JavaScript部分使用jQuery的.ready()方法在DOM加載完成時執行,監聽選項卡的點擊事件。根據所點擊的選項卡的class,在對應的內容div中添加.current類,從而實現選項卡的切換。由于選項卡的數量可能不止三個,因此可以考慮使用循環和動態生成HTML標簽的方式來實現。