如果您正在開發一個Web應用程序或網站，那么您很可能會使用jQuery來改進用戶界面，并使其更易于使用。其中之一的開發需求可能是通過jQuery當用戶單擊列表項（li）后改變可見內容。在本文中，我們將介紹如何使用jQuery通過判斷單擊事件來實現該功能。

$(document).ready(function(){
$("li").click(function(){
//檢查單擊的li是否已被選中
if($(this).hasClass("active")){
return;
}
//將所有li的類名稱重置為非活動狀態
$("li").removeClass("active");
//將單擊的li設置為活動狀態
$(this).addClass("active");
//根據單擊的li顯示適當的內容
var contentId = $(this).attr("id")+"-content";
$(".content").hide();
$("#"+contentId).show();
});
});

在上面的jQuery代碼中，我們首先使用文檔準備好函數，以確保當頁面加載時所有元素都已準備就緒。然后，我們選擇所有列表項并將它們綁定到click事件。在單擊一個列表項時，我們首先檢查該列表項是否已被選中（也就是它是否已經具有類名“active”）。如果該列表項已經處于活動狀態，則我們不做任何事情，否則，我們將所有列表項的類名重置為非活動狀態，然后將單擊的列表項設置為活動狀態。最后，我們根據單擊的列表項內容（使用ID屬性）顯示適當的內容。