Javascript 如何根据产品点击在同一页面的特定部门显示不同产品的产品描述？

我想做一个电子商务网站。在产品页面中，我们有一个产品图像列表，在产品图像的悬停链接上，我们需要显示不同产品的不同描述。这里我附加了一些代码。这适用于一个或两个产品。我需要申请很多产品。请帮帮我

<script type="text/javascript" language="javascript">
function hide(id){
var element = document.getElementById(id); 
element.style.display = "none";
}
function show(id){
var element = document.getElementById(id); 
element.style.display = "";
}
function toggle(id){
var element = document.getElementById(id); 
element.style.display = (element.style.display == "") ? "none" : "";
}
function showDetail(){show("view-details");hide("view-summary");}
function showSummary(){show("view-summary");hide("view-details");} 
</script>

<a onclick="showDetail()" class="text" href="#">Mirror</a> |
<a onclick="showSummary()" class="text" href="#">Trolley</a>

<p>
 <div id="view-details" style="display:none;border:1px solid red;">
  im mirror
</div>

<div id="view-summary" style="display:none;border:1px solid blue;">I'm Trolley</div>
</p>

函数隐藏（id）{
var元素=document.getElementById（id）；
element.style.display=“无”；
}
功能显示（id）{
var元素=document.getElementById（id）；
element.style.display=“”；
}
功能切换（id）{
var元素=document.getElementById（id）；
element.style.display=（element.style.display==”）？“无”：“；
}
函数showDetail（）{show（“查看详细信息”）；hide（“查看摘要”）；}
函数showSummary（）{show（“查看摘要”）；hide（“查看详细信息”）；}
|

im镜像
我是电车

像这样吗

函数隐藏（）{
var all=$（“#产品部门”）；
$（全部）.css（“显示”、“无”）；
}
功能显示（id）{
隐藏（）；
var元素=document.getElementById（id）；
element.style.display=“”；
}

|
|
|

im镜像
我是电车
我是镜像333
我是电车444

尽管可能，但您可以不使用JavaScript创建所需内容。例如，通过使用HTML和CSS，您可以实现这一点，并创建悬停效果来显示产品详细信息。这里有一个例子

.products{
显示器：flex；
柔性流：柱包裹；
}
.产品#查看详细信息{
显示：无；
}
.产品：悬停#查看详细信息{
显示：块；
}
.产品{
显示器：flex；
flex flow：列无换行
}

细节：
我是镜子

细节：
我是一辆手推车

先生，谢谢您的帮助。但我的要求不同。我只想在左边列出所有产品，在右边修改我的描述，没问题。我已经更新了代码，使布局如您所述。如果这回答了你的问题，请告诉我。