Javascript 更改选项卡上父div的背景图像单击

我最初在网上发布了一个问题，得到了一个很好的答案

然而，我想做的是更改每个活动选项卡单击的父容器背景图像，这似乎需要不同的代码。 下面是我希望实现的目标的示例：

---

这不是实现这一目标的最佳方式，当然，你可以找到不同的更好的方法

$('ul>li:nth-child(1)').on('click', function() {
  $(".main").css('background-image', 'url(image-example1.png)');
})
$('ul>li:nth-child(2)').on('click', function() {
  $(".main").css('background-image', 'url(image-example2.png)');
})
$('ul>li:nth-child(3)').on('click', function() {
  $(".main").css('background-image', 'url(image-example3.png)');
})
$('ul>li:nth-child(4)').on('click', function() {
  $(".main").css('background-image', 'url(image-example4.png)');
})

正文{
字体：13px Verdana；
}
梅因先生{
填充：100px0；
}
保险商实验室{
显示器：flex；
填充：0；
列表样式：无；
证明内容：中心；
}
ulli{
利润率：0.10px；
填充：10px；
边框：1px实心#ddd；
}

红色的
蓝色的
青色
黄色的

如果你对前面的问题有了一个很好的答案，你可以考虑把它标记为正确吗？此外，为了让我们更好地帮助您，请更新您的问题，使其在问题本身的a中显示所有相关代码，而不是简单地链接到您的网站（可能被过滤器或抗病毒程序阻止）。感谢您的更正，我刚刚这么做了。您在前面的问题中链接到的代码可以更新以处理相同的功能。