如果您正在开发一个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属性）显示适当的内容。