選項卡切換是一個常見的網頁功能，能夠讓用戶輕松地切換不同內容。jQuery提供了方便的方法來實現選項卡切換效果。
<!-- HTML結構 -->
<div id="tab">
<ul>
<li><a href="#panel1">面板1</a></li>
<li><a href="#panel2">面板2</a></li>
<li><a href="#panel3">面板3</a></li>
</ul>
<div id="panel1"></div>
<div id="panel2"></div>
<div id="panel3"></div>
</div>
<!-- JavaScript代碼 -->
$(function() {
$('#tab ul li a').click(function() {
var panel = $(this).attr('href');
$('#tab div').hide();
$(panel).show();
return false;
});
});首先，HTML中我們創建了一個
元素，它包含一個無序列表和三個面板。每個面板在無序列表中用一個鏈接與之對應。面板的ID屬性與每個鏈接的href屬性相對應。
然后，我們使用jQuery選擇元素的方法來找到所有鏈接。當用戶點擊鏈接時，我們獲取其href值并以此為參數來選擇相應面板。我們使用show()和hide()方法來切換面板顯示和隱藏。
注意，我們使用return false;語句來阻止默認鏈接行為（鏈接跳轉）。否則，每次用戶單擊鏈接時，頁面會重新加載。
這是一種簡單而有效的方法來制作選項卡切換效果，讓用戶輕松地切換頁面內容。