javascript - 用onclick替换不同div中的内容

Question

我正在尝试制作一个页面，该页面在左侧有一个商店位置列表，在左侧有一个显示商店位置和营业时间的 div。

这因商店而异，因此我试图让右侧 div 中的内容显示与您在页面左侧单击的商店相匹配的信息。 This is what I currently have ，而且还不是很好。

现在，这只是一个简单的悬停，而且效果很好。但是我遇到了一个新问题:鼠标一离开“store 1”，文本就消失了

我试图通过使用 onClick 事件来解决这个问题，但这在 div 中显示了商店 1 的信息，如果您单击商店的链接，我不知道如何将其替换为商店 2 的信息2.(something like this，根本不起作用)

function showDiv1() {
    document.getElementById('store1').style.display = "block";
    document.getElementById('rood').style.backgroundColor = "red";
}

function showDiv2() {
    document.getElementById('store1').style.display = "block";
    document.getElementById('rood').style.backgroundColor = "red";
}

所以基本上我有两个问题。

1:点击左侧店铺后，如何替换右侧div中的内容。

2:必须有一个更简单的解决方案。必须有。谁能建议在这里采取不同的方法？

到目前为止，我已经在这上面浪费了一个上午，所以非常感谢任何帮助!谢谢。

Answer 1

我建议使用一个可以处理所有 div 的函数，而不是为每个 div 创建一个函数。

    <div id="zweef" onmouseover="javascript:showdetail('<p>some detail here</p>')">
store 1</div>

    function showdetail(detail){
        document.getElementById('fiets').innerHTML=detail;
    }